DatePicker Samples - InkJS

<div class="control">
    <label for="dPicker">A date field:</label>
    <input
        type="text"
        id="dPicker"
        class="ink-datepicker"
        data-date-range="2013-10-10:NOW"
        data-format="dd/mm/yyyy"></input>
</div>

<select class="DISdays"></select>
<select class="DISmonths"></select>
<select class="DISyears"></select>
<input type="text" class="ink-datepicker"
    data-display-in-select="true"
    data-day-field=".DISdays"
    data-month-field=".DISmonths"
    data-year-field=".DISyears">
<script>
    Ink.requireModules(['Ink.UI.DatePicker_1', 'Ink.Dom.Element_1'], function (DatePicker, InkElement) {
        var i;
        for (i = 1; i <= 12; i+=1) {
            Ink.s('.DISmonths').appendChild(InkElement.create('option', {
                value: i,
                setTextContent: i
            }));
        }
        for (i = 1; i <= 31; i+=1) {
            Ink.s('.DISdays').appendChild(InkElement.create('option', {
                value: i,
                setTextContent: i
            }));
        }
        for (i = 1995; i <= 2013; i+=1) {
            Ink.s('.DISyears').appendChild(InkElement.create('option', {
                value: i,
                setTextContent: i
            }));
        }
    });
</script>

<div class="control">
    <input id="dPicker3" type="text" data-format="dd/mm/yyyy">
    <label for="dPicker3">
        A datepicker with nextValidDateFn and prevValidDateFn, to help us find holes in the dates. This picker will only let you choose January 1<sup>st</sup> of each year
    </label>
</div>

<script>
    Ink.requireModules(['Ink.UI.DatePicker_1'], function (DatePicker) {
        new DatePicker(dPicker3, {
            startDate: '2000-01-01',
            validDayFn: function (year, month, day) {
                return month === 1 && day === 1;
            },
            validMonthFn: function (year, month, day) {
                return month === 1;
            },
            nextValidDateFn: function (year, month, day) {
                return new Date(year + 1, 0, 1);
            },
            prevValidDateFn: function (year, month, day) {
                return new Date(year - 1, 0, 1)
            }
        });
    });
</script>

The autoOpen option makes the datepicker load automatically. The shy option makes the datepicker close when you click something else, and the onFocus option makes the datepicker load when you click the text box. Otherwise, it creates an "open" button.