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>
HTML

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>
HTML

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>
HTML

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">
HTML

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
})
JavaScript
← Previous page Checkbox Next page → Select
Copyright © 2025 Winter CMS
Please enter a query in order to search.