Date Picker

Input element used to select a date.

How to

The Date Picker component is used to select a date from a calendar.

It is composed of an <input type="text"> element where the user can type the desired date, with the addition of a calendar widget for easier date navigation/selection. The calendar widget can be navigated using the keyboard (arrows to navigate through days, pageup/pagedown to navigate through months).

Options #

The Date Picker component comes with the following customizations:

1. Month labels: by default, the calendar widget shows the full English name of the months; if you wish to change this default (e.g., passing a short version of the label or using a different language), add a data-months attribute to the .date-input element with the comma-separated list of the labels you want to use:
   

   <div class="date-input js-date-input" data-months="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec">
     <!-- ... -->
   </div>​

2. Date format: by default, the date format of the text input field is 'dd/mm/yyyy'; if you want to change this order (e.g., yyyy/mm/dd), add a data-date-format attribute to the .date-input element with the new order you want to use:
   

   <div class="date-input js-date-input" data-date-format="y-m-d">
     <!-- ... -->
   </div>​

3. Date separator: by default, the slash ('/') is used as date separator; if you want to use a different character (e.g., '-'),  add a data-date-separator attribute to the .date-input element:
   

   <div class="date-input js-date-input" data-date-separator="-">
     <!-- ... -->
   </div>​

Dynamic Content #

If your date picker component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the DatePicker object:

// do this after your content has been added to the page
var datePicker = document.getElementsByClassName('date-input')[0]; // your dynamically created date picker
new DatePicker({
  element: datePicker, // required
  // dateFormat: 'y-m-d', // if you want to pass a custom date format
  // dateSeparator: '-', // if you want to pass a custom date separator
  // months: 'Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec', // if you want ti pass a custom list of month labels
});

Preslected Date #

If you want to prefill your Date Picker component with a date, use the .js-date-input__text input element and set its value equal to the date you want to use. Make sure to use the proper date format (e.g., dd/mm/yyyy).

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗