Date Picker

Renders a date picker, time picker, or both. The input associated to each control acts as a facade, the final value is stored in an underlying hidden input, called a data locker.

#Examples

#Date Picker

<div data-control="datepicker">
    <!-- Date -->
    <input
        type="text"
        class="form-control"
        placeholder="Select a date"
        data-datepicker />

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

<div data-control="datepicker">
    <!-- Date -->
    <input
        type="text"
        class="form-control"
        placeholder="Select a date"
        data-datepicker />

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

#Time Picker

<div data-control="datepicker">
    <!-- Time -->
    <input
        type="text"
        class="form-control"
        placeholder="Select a time"
        data-timepicker />

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

<div data-control="datepicker">
    <!-- Time -->
    <input
        type="text"
        class="form-control"
        placeholder="Select a time"
        data-timepicker />

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

#Date & Time Picker

<div data-control="datepicker">
    <div class="row">
        <div class="col-md-6">
            <!-- Date -->
            <input
                type="text"
                class="form-control"
                placeholder="Select a date"
                data-datepicker />
        </div>
        <div class="col-md-6">
            <!-- Time -->
            <input
                type="text"
                class="form-control"
                placeholder="Select a time"
                data-timepicker />
        </div>
    </div>

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

<div data-control="datepicker">
    <div class="row">
        <div class="col-md-6">
            <!-- Date -->
            <input
                type="text"
                class="form-control"
                placeholder="Select a date"
                data-datepicker />
        </div>
        <div class="col-md-6">
            <!-- Time -->
            <input
                type="text"
                class="form-control"
                placeholder="Select a time"
                data-timepicker />
        </div>
    </div>

    <!-- Data locker -->
    <input
        type="hidden"
        name="my_date"
        data-datetime-value
        />
</div>

#Locale and timezone handling

The date picker handles timezone and locale preferences automatically. Locale preferences will provide the date format for the region. The timezone setting is used to convert the chosen value to a uniform timezone, commonly UTC. These features are not enabled by default and require adding <meta /> tags to the page.

<meta name="app-timezone" content="UTC">
<meta name="backend-timezone" content="Australia/Sydney">
<meta name="backend-locale" content="en-au">

When a date is selected, it will be converted from the backend-timezone to the app-timezone for normalized storage.

NOTE: Locale values are supplied by the Moment.js library.

#Supported data attributes

• data-control="datepicker" - enables the plugin on an element
• data-format="YYYY-MM-DD" - display format
• data-min-date="value" - minimum date to allow
• data-max-date="value" - maximum date to allow
• data-year-range="10" - range of years to display

#JavaScript API

$('div#datepicker').datePicker({
    format: 'YYYY-MM-DD',
    yearRange: 10
})