--- title: Date Picker layout: nested-component.html github: components/forms/date-picker.html ---

Date Picker bootstrap-datetimepicker

Full list of options can be found here which can be set by the data-options attribute.
The date picker component is initialized by .date-picker classname.
NOTE: If data-toggle attribute isn't set, the component will default to date and time picker.

Date picker

Loading...

NYI

Time picker

Loading...

NYI

Date and time picker

Loading...

NYI

Inline

Will display the picker inline without the need of a input field. This will also hide borders and shadows.

Loading...

NYI

Side by side

Default: false
Shows the picker side by side when using the time and date together.

Loading...

NYI

Show Clear

Default: false
Specifies if the clear date button will appear on the widget

Loading...

NYI

Using locales

See momentjs for valid locales.

Loading...

NYI

Custom formats

Date default: YYYY-MM-DD
Time default: HH:mm
Date & time default: YYYY-MM-DD HH:mm
See momentjs' docs for valid formats. Format also dictates what components are shown, e.g.MM/dd/YYYY will not display the time picker.
Note: This is only affecting the "view" value, and NOT the value sent to the backend. Default format sent to the backend is YYYY-MM-DD HH:mm:ss which is not configureable.

Loading...

NYI

Parse ISO

Default: false
Formatting date/datetime for PHP ISO standard.
Note: This is not affecting the "view" value, but only the value sent to the backend format: YYYY-MM-DDTHH:mm:ssZZ

Loading...

NYI

Calendar weeks

Default: false
Shows the week of the year to the left of first day of the week.

Loading...

NYI

Min date

Default: false
Prevents date/time selections before this date.
minDate will override defaultDate and useCurrent if either of these settings are the same day since both options are invalid according to the rules you've selected.

Loading...

NYI

Max date

Default: false
Prevents date/time selections before this date.
maxDate will override defaultDate and useCurrent if either of these settings are the same day since both options are invalid according to the rules you've selected.

Loading...

NYI

Keep open

Default: false
Will cause the date picker to stay open after selecting a date if no time components are being used.

Loading...

NYI

Tooltips

        defaults: {
            today: 'Go to today',
            clear: 'Clear selection',
            close: 'Close the picker',
            selectMonth: 'Select Month',
            prevMonth: 'Previous Month',
            nextMonth: 'Next Month',
            selectYear: 'Select Year',
            prevYear: 'Previous Year',
            nextYear: 'Next Year',
            selectDecade: 'Select Decade',
            prevDecade: 'Previous Decade',
            nextDecade: 'Next Decade',
            prevCentury: 'Previous Century',
            nextCentury: 'Next Century'
        }
This will change the tooltips over each icon to a custom string

Loading...

NYI

No icon (input fields only)

Loading...

NYI

Disabled dates

        Default: false
        Accepts: array of dates [string]
Disables selection of dates in the array, e.g. holidays

Loading...

NYI

Disabled days of the week

        Default: []
        Accepts: array of numbers from 0-6

Loading...

NYI

Custom icons

You can configure following icons, and available icons can be found here

        Defaults: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-arrow-up',
            down: 'fa fa-arrow-down',
            previous: 'fa fa-arrow-left',
            next: 'fa fa-arrow-right',
            today: 'fa fa-calendar-times-o',
            clear: 'fa fa-trash',
            close: 'fa fa-times'
        }
        

Loading...

NYI

Default date

Sets the picker default date/time. Overrides useCurrent

Loading...

NYI

View mode

    Default: 'days'
    Accepts: 'decades','years','months','days'
The default view to display when the picker is shown.
Note: To limit the picker to selecting, for instance the year and month, use format: MM/YYYY

Loading...

NYI