🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Date Picker

Input element used to select a date.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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
});

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us