CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Date Picker

Input element used to select a date.

Copy: View demo


All components are built upon the CodyHouse Framework.

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).

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">
      <!-- ... -->
  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">
      <!-- ... -->
  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="-">
      <!-- ... -->

To edit the size of the calendar, you can modify the font-size of the .date-picker element. All the calendar elements will scale accordingly.

.date-picker {
  font-size: 1rem;


  • ✅ Component created
    🗓 August 30, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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