DateTimePickerComponent

DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript.

DatePicker

DatePicker class allows you to select a single date. See documentation on GitHub.

Example 1

If you don't pass any settings object, the first selectable date (first_date) is the current date. start_date is one day more than current date, last_date is one year more than start_date. The first week day is Sunday.

new DatePicker( 'select_date' );

<div id="select_date"></div>

Example 2

When you define settings object, all *_date properties can be a date string (in ISO format) or a date object. If you're creating a date with new operator, remember that months are zero-indexed.

new DatePicker( 'select_date_2', {
first_date: "2030-01-02",
start_date: "2030-01-05",
last_date: new Date( 2030, 0, 29 ),
first_day_no: 1,
date_output: "timestamp",
styles: {
  active_background: '#e34c26',
  active_color: '#fff'
}
} );

<div id="select_date_2"></div>

Example 3

In this example input.date_output overwrites settings.start_date

new DatePicker( 'select_date_3', {
first_date: "2030-01-02",
start_date: "2030-01-05",
} );

<div id="select_date_3">
<input type="hidden" name="your-custom-value" class="date_output" value="2030-01-06">
</div>

DateTimePicker

DateTimePicker class allows you to select a single date/time. See documentation on GitHub.

Example 4

If you localize this component in Italian, you have to use the l10n property and Monday should be the first week day (first_day_no: 1). Note that, unlike DatePicker and DateRangePicker classes, with DateTime* classes it make sense to have a datetime representation of date like in source code below. Remember: if you're creating date with new operator months are zero-indexed.

const it = {
'jan':'Gen',
'feb':'Feb',
'mar':'Mar',
'apr':'Apr',
'may':'Mag',
'jun':'Giu',
'jul':'Lug',
'aug':'Ago',
'sep':'Set',
'oct':'Ott',
'nov':'Nov',
'dec':'Dic',
'jan_':'Gennaio',
'feb_':'Febbraio',
'mar_':'Marzo',
'apr_':'Aprile',
'may_':'Maggio',
'jun_':'Giugno',
'jul_':'Luglio',
'aug_':'Agosto',
'sep_':'Settembre',
'oct_':'Ottobre',
'nov_':'Novembre',
'dec_':'Dicembre',
'mon':'Lun',
'tue':'Mar',
'wed':'Mer',
'thu':'Gio',
'fri':'Ven',
'sat':'Sab',
'sun':'Dom',
'mon_':'Lunedì',
'tue_':'Martedì',
'wed_':'Mercoledì',
'thu_':'Giovedì',
'fri_':'Venerdì',
'sat_':'Sabato',
'sun_':'Domenica',
'done':'Imposta'
};

new DateTimePicker( 'select_datetime', {
start_date: '2030-03-22T14:30:00',
last_date: new Date( 2030, 2, 29, 22, 30 ),
first_day_no: 1,
l10n: it
} );

<div id="select_datetime"></div>

DateRangePicker

DateRangePicker class allows you to select a date range. See documentation on GitHub.

Example 5

Here we've set 2 days of minimum range (min_range_hours: 48)

new DateRangePicker( 'start_date', 'end_date', {
min_range_hours: 48,
} );

<div id="start_date"></div>
<div id="end_date"></div>

DateTimeRangePicker

DateTimeRangePicker class allows you to select a date/time range. See documentation on GitHub.

Example 6

In this example input.date_output elements overwrite settings.start_date and settings.end_date. settings.round_to property enables the time picker with select elements. Minutes are rounded to the `round_to` value (5) and his multiples.

new DateTimeRangePicker( 'start_date_time', 'end_date_time', {
first_date: "2030-01-02T10:30:00",
start_date: "2030-01-05T16:00:00",
end_date: "2030-01-06T18:00:00",
last_date: new Date( 2030, 0, 29, 14, 0 ),
first_day_no: 1,
round_to: 5,
date_output: "timestamp",
styles: {
  active_background: '#e34c26',
  active_color: '#fff',
  inactive_background: '#0366d9',
  inactive_color: '#fff' },
min_range_hours: 18
} );

<div id="start_date_time">
<input type="hidden" class="date_output" value="2030-01-06T16:00:00">
</div>
<div id="end_date_time">
<input type="hidden" class="date_output" value="2030-01-07T16:00:00">
</div>