Date Picker

Bootstrap Date Picker

Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.

Basic example MDB Pro component

Try me...

Show code Edit in sandbox

Initialization required

To use our Material DatePicker you have to initialize it first with the code below.

HTML
JavaScript

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

        
            

        // Data Picker Initialization
        $('.datepicker').pickadate();

Note: Javascript numeration

Months in a JavaScript Date object are zero-indexed. Meaning, new Date(2015, 3, 20) is 20 April, 2015.

To stay consistent with this, whenever an integer is used in reference to a month, pickadate treats it as zero-indexed. Dates as strings are still parsed as expected.

Default settings

These are the default settings applied to the basic invocation above. To change them, simply initialize the Date Picker with the desired values.

Show code Edit in sandbox

JavaScript

        
            

        // Strings and translations
        monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
        'November', 'December'],
        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        showMonthsShort: undefined,
        showWeekdaysFull: undefined,

        // Buttons
        today: 'Today',
        clear: 'Clear',
        close: 'Close',

        // Accessibility labels
        labelMonthNext: 'Next month',
        labelMonthPrev: 'Previous month',
        labelMonthSelect: 'Select a month',
        labelYearSelect: 'Select a year',

        // Formats
        format: 'd mmmm, yyyy',
        formatSubmit: undefined,
        hiddenPrefix: undefined,
        hiddenSuffix: '_submit',
        hiddenName: undefined,

        // Editable input
        editable: undefined,

        // Dropdown selectors
        selectYears: undefined,
        selectMonths: undefined,

        // First day of the week
        firstDay: undefined,

        // Date limits
        min: undefined,
        max: undefined,

        // Disable dates
        disable: undefined,

        // Root picker container
        container: undefined,

        // Hidden input container
        containerHidden: undefined,

        // Close on a user action
        closeOnSelect: true,
        closeOnClear: true,

        // Events
        onStart: undefined,
        onRender: undefined,
        onOpen: undefined,
        onClose: undefined,
        onSet: undefined,
        onStop: undefined,

        // Classes
        klass: {

        // The element states
        input: 'picker__input',
        active: 'picker__input--active',

        // The root picker and states *
        picker: 'picker',
        opened: 'picker--opened',
        focused: 'picker--focused',

        // The picker holder
        holder: 'picker__holder',

        // The picker frame, wrapper, and box
        frame: 'picker__frame',
        wrap: 'picker__wrap',
        box: 'picker__box',

        // The picker header
        header: 'picker__header',

        // Month navigation
        navPrev: 'picker__nav--prev',
        navNext: 'picker__nav--next',
        navDisabled: 'picker__nav--disabled',

        // Month & year labels
        month: 'picker__month',
        year: 'picker__year',

        // Month & year dropdowns
        selectMonth: 'picker__select--month',
        selectYear: 'picker__select--year',

        // Table of dates
        table: 'picker__table',

        // Weekday labels
        weekdays: 'picker__weekday',

        // Day states
        day: 'picker__day',
        disabled: 'picker__day--disabled',
        selected: 'picker__day--selected',
        highlighted: 'picker__day--highlighted',
        now: 'picker__day--today',
        infocus: 'picker__day--infocus',
        outfocus: 'picker__day--outfocus',

        // The picker footer
        footer: 'picker__footer',

        // Today, clear, & close buttons
        buttonClear: 'picker__button--clear',
        buttonClose: 'picker__button--close',
        buttonToday: 'picker__button--today'
        }

Customization

Strings

Change the month and weekday labels as you wish:

Click

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        showMonthsShort: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Buttons

Change the text, or hide a button completely, by passing a false-y value:

Changed text.

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        today: '',
        clear: 'Clear selection',
        close: 'Cancel'
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Accessibility labels

Change the title attributes to several elements within the picker:

Own labels

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        labelMonthNext: 'Go to the next month',
        labelMonthPrev: 'Go to the previous month',
        labelMonthSelect: 'Pick a month from the dropdown',
        labelYearSelect: 'Pick a year from the dropdown',
        selectMonths: true,
        selectYears: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Translations

The picker can be extended to add support for internationalization. Translations for over 40 languages are available out of the box, which you can include in one of two ways:

Translation

Show code Edit in sandbox

JavaScript
HTML

        
            
        // Extend the default picker options for all instances.
        $.extend($.fn.pickadate.defaults, {
        monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre',
        'Novembre', 'Décembre'],
        weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        today: 'aujourd\'hui',
        clear: 'effacer',
        formatSubmit: 'yyyy/mm/dd'
        })

        // Or, pass the months and weekdays as an array for each invocation.
        $('.datepicker').pickadate({
        monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre',
        'Novembre', 'Décembre'],
        weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        today: 'aujourd\'hui',
        clear: 'effacer',
        formatSubmit: 'yyyy/mm/dd'
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Note:

When using translations, specify formatSubmit and data-value to ensure the date parses correctly regardless of locale.

Formats

Display a human-friendly format and use an alternate one to submit to the server.

This is done by creating a new hidden input element with the same name attribute as the original with an optional prefix/suffix:

Optional prefix/suffix

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        // Escape any “rule” characters with an exclamation mark (!).
        format: 'You selecte!d: dddd, dd mmm, yyyy',
        formatSubmit: 'yyyy/mm/dd',
        hiddenPrefix: 'prefix__',
        hiddenSuffix: '__suffix'
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Send the hidden `value` only

A majority of the time, the value that needs to be sent to the server is just the hidden value — and not the visible one. To make this happen, use the hiddenName option.

This essentially nullifies hiddenPrefix and hiddenSuffix, strips the name attribute from the source input, and then sets it as the name of the hidden input:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        showMonthsShort: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Pre-fill values using custom formats or translations

When using a custom formatting rule for the format option, or when using translations, the input element should be given a data-value attribute formatted using the [yyyy,m,dd] while months count from 0 to 11 — the element’s value can be left blank. This helps to parse the date from custom formats into various languages:

Try me...

Show code Edit in sandbox

HTML
JavaScript

        
            
        
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="prefill" class="form-control datepicker" data-value="[2015,6,1]">
          <label for="prefill">Try me...</label>
        </div>

        
            
          $('#prefill').pickadate({

          });

Formatting rules

The following rules can be used to format any date:

Rule	Description	Result
`d`	Date of the month	1 – 31
`dd`	Date of the month with a leading zero	01 – 31
`ddd`	Day of the week in short form	Sun – Sat
`dddd`	Day of the week in full form	Sunday – Saturday
`m`	Month of the year	1 – 12
`mm`	Month of the year with a leading zero	01 – 12
`mmm`	Month name in short form	Jan – Dec
`mmmm`	Month name in full form	January – December
`yy`	Year in short form *	00 – 99
`yyyy`	Year in full form	2000 – 2999

Note:

If you use the yy rule in the format option, you must specify the yyyy rule in the formatSubmit option with the appropriate data-value attribute to ensure the the date parses accurately.

Never use the yy rule in the formatSubmit option.

Heading

By default, typing into the input is disabled by giving it a readOnly attribute. Doing so ensures that virtual keyboards don’t pop open on touch devices. It is also a confirmation that values passed to the server will be of a consistent format.

However, this behavior can be changed using the editable option:

Write something below

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        editable: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Note:

An important thing to note here is that the above disables keyboard bindings on the input element, such as arrow keys opening the picker. You will have to add your own bindings as you see fit.

Using html5 attributes

Because each input is readOnly by default, HTML5 attributes, such as required and pattern, do not get enforced.

To enable default browser behavior on these attributes, set the editable property to true.

Display select menus to pick the month and year. Anything truth-y enables the selectors and anything false-y switches them into text:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        selectYears: true,
        selectMonths: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

You can also specify the number of years to show in the dropdown using an even integer — half before and a half after the year in focus:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        // `true` defaults to 10.
        selectYears: 4
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

First weekday

The first day of the week can be set to either Sunday or Monday. Anything truth-y sets it as Monday and anything false-y as Sunday:

Sunday as first day

Show code Edit in sandbox

JavaScript
HTML

{

        
            
        $('.datepicker').pickadate({
        firstDay: 0
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Date limits

Set the minimum and maximum selectable dates on the picker:

Date limit

1. Using JavaScript Date object:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({ min: new Date(2015,3,20),
        max: new Date(2015,7,14)
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

2. Using arrays formatted as [YEAR,MONTH,DATE]

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({ min: [2015,3,20],
        max: [2015,7,14]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

3. Using integers or a boolean

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        // An integer (positive/negative) sets it relative to today.
        min: -15,
        // `true` sets it to today. `false` removes any limits.
        max: true
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Disable dates

Disable a specific or arbitrary set of dates selectable on the picker.

Disabled dates

You can do it by:

1. Using JavaScript Date object

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        new Date(2015,3,13),
        new Date(2015,3,29)
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

2. Using arrays formatted as [YEAR,MONTH,DATE]

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        [2015,3,3],
        [2015,3,12],
        [2015,3,20]
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

3. Using integers as days of the week (1 to 7)

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        1, 4, 7
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

4. Using objects as a range of dates

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        { from: [2016,2,14], to: [2016,2,27] }
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Note:

When it comes to disabling particular dates, the values for from & to can be a JavaScript Date object, an array formatted as [YEAR,MONTH,DATE] or a booleanvalue (true sets the date as “today”).

The values can also be integers representing dates relative to the other, where to can only be positive ({ from: [2016,3,12], to: 10 }), while from can only be negative ({ from: -10, to: true })

5. Disabling all with a set of exceptions

Enable only a specific or arbitrary set of dates by setting the the first item in the collection as true:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        true,
        1, 4, 7,
        [2015,3,3],
        [2015,3,12],
        [2015,3,20],
        new Date(2015,3,13),
        new Date(2015,3,29)
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

6. Disabling ranges with exceptions

Enable dates that fall within a range of disabled dates by adding an the inverted parameter to the item within the collection:

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        disable: [
        5,
        [2015, 10, 21, 'inverted'],
        { from: [2016, 3, 15], to: [2016, 3, 25] },
        [2016, 3, 20, 'inverted'],
        { from: [2016, 3, 17], to: [2016, 3, 18], inverted: true }
        ]
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Close on a user action

When a date is selected or the “clear” button is pressed, the picker closes. To change this behavior, use the following options:

Without closing

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        closeOnSelect: false,
        closeOnClear: false
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

Events

Fire off events as the user interacts with the picker:

Look on the console

Show code Edit in sandbox

JavaScript
HTML

        
            
        $('.datepicker').pickadate({
        onStart: function() {
        console.log('Hello there :)')
        },
        onRender: function() {
        console.log('Whoa.. rendered anew')
        },
        onOpen: function() {
        console.log('Opened up')
        },
        onClose: function() {
        console.log('Closed now')
        },
        onStop: function() {
        console.log('See ya.')
        },
        onSet: function(context) {
        console.log('Just set stuff:', context)
        }
        })

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
          <label for="date-picker-example">Try me...</label>
        </div>

"From - to" Date Pickers (date range)

Date Pickers are great for selecting a particular date, but sometimes we need more than that - take periods, for example. Setting a starting and finishing date requires cooperation between the two Pickers, as the end date being set to a time before the start date makes no sense. Luckily, we can tie two Date Pickers together (their inputs, min and max properties, to be exact). We achieve it using getters and setters and here's how:

Live preview

Show code Edit in sandbox

HTML
JavaScript

        
            

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-md-6 mb-4">

            <div class="md-form">
              <!--The "from" Date Picker -->
              <input placeholder="Selected starting date" type="text" id="startingDate" class="form-control datepicker">
              <label for="startingDate">start</label>
            </div>

          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-6 mb-4">

            <div class="md-form">
              <!--The "to" Date Picker -->
              <input placeholder="Selected ending date" type="text" id="endingDate" class="form-control datepicker">
              <label for="endingDate">end</label>
            </div>

          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        
            

        // Get the elements
        var from_input = $('#startingDate').pickadate(),
        from_picker = from_input.pickadate('picker')
        var to_input = $('#endingDate').pickadate(),
        to_picker = to_input.pickadate('picker')

        // Check if there’s a “from” or “to” date to start with and if so, set their appropriate properties.
        if ( from_picker.get('value') ) {
        to_picker.set('min', from_picker.get('select'))
        }
        if ( to_picker.get('value') ) {
        from_picker.set('max', to_picker.get('select'))
        }

        // Apply event listeners in case of setting new “from” / “to” limits to have them update on the other end. If ‘clear’ button is pressed, reset the value.
        from_picker.on('set', function(event) {
        if ( event.select ) {
        to_picker.set('min', from_picker.get('select'))
        }
        else if ( 'clear' in event ) {
        to_picker.set('min', false)
        }
        })
        to_picker.on('set', function(event) {
        if ( event.select ) {
        from_picker.set('max', to_picker.get('select'))
        }
        else if ( 'clear' in event ) {
        from_picker.set('max', false)
        }
        })

Default Date Picker

Choose your date

Show code Edit in sandbox

HTML

        
            

        <div class="md-form">
          <input type="date" id="inputMDEx" class="form-control">
          <label for="inputMDEx">Choose your date</label>
        </div>

Access from outside

You can open Date Picker by clicking on another element. If you want to do this, you have to add .picker-opener class and data-open="DatePickerID" HTML data-* Attribute on opening element.

Try me...

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div class="md-form">
          <input placeholder="Selected date" type="text" id="myPicker" class="form-control datepicker">
            <label for="myPicker">Try me...</label>
            <button class="picker-opener btn btn-primary btn-sm" data-open="myPicker">Open</button>
        </div>

        
            
        // Data Picker Initialization
        $('.datepicker').pickadate();

Date Picker

Bootstrap Date Picker

Basic example MDB Pro component

Default settings

Customization

Strings

Buttons

Accessibility labels

Translations

Formats

Send the hidden value only

Pre-fill values using custom formats or translations

Formatting rules

Heading

Using html5 attributes

Dropdown selectors

First weekday

Date limits

Disable dates

Close on a user action

Events

"From - to" Date Pickers (date range)

Default Date Picker

Access from outside

Send the hidden `value` only