DateTimePickerComponent is an extremely lightweight (less than 20 KB), dependency-free web component written in pure JavaScript. It supports subtitles, date formats, scoping, and broken dates.
datepicker using javascript, date time picker javascript, datepicker in javascript, simple javascript date picker, vanilla javascript datetime picker
DateTimePickerComponent exposes four different classes:
- DatePicker;
- DateTimePicker;
- DateRangePicker;
- DateTimeRangePicker.
To-do list
- Provide a year/month picker.
- Provide support for disabling arbitrary days/hours between
first_dateandlast_date. - Provide support for swiping months.
How to make use of it:
1. Install and download the NPM.
# NPM $ npm i date-time-picker-component --save
2. Import the Datetime Picker Component.
// using a bundler
import 'date-time-picker-component/dist/css/date-time-picker-component.min.css';
import { DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker } from "date-time-picker-component/dist/js/date-time-picker-component.min";// browser <link href="dist/css/date-time-picker-component.min.css" rel="stylesheet" /> <script src="dist/js/date-time-picker-component.min.js"></script>
3. Create a primary date picker.
<div id="datepicker"></div>
new DatePicker('datepicker');
// browser
new DateTimePickerComponent.DatePicker('datepicker');4. Create a primary date & time picker.
<div id="datetimepicker"></div>
new DateTimePicker('datetimepicker');
// browser
new DateTimePickerComponent.DateTimePicker('datetimepicker');5. Create a primary date range picker.
<div id="start1"></div> <div id="end1"></div>
new DateRangePicker('start1', 'end1');
// browser
new DateTimePickerComponent.DateRangePicker('start1', 'end1');6. Create a basic date & time range picker.
<div id="start2"></div> <div id="end2"></div>
new DateTimeRangePicker('start2', 'end2');
// browser
new DateTimePickerComponent.DateTimeRangePicker('start2', 'end2');7. Customize the Datetime Picker element.
new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
// first date
first_date: "2030-01-02",
// last date
last_date: new Date( 2030, 0, 29 ),
// start date
start_date: "2030-01-05",
// only for range picker
end_date: "2030-10-05",
// 0 = Sunday, 1 = Monday
first_day_no: 1,
// "short_ISO" or "full_ISO"
date_output: "timestamp",
// only for range picker
min_range_hours: 1,
});8. Localize the Datetime Picker element.
new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
l10n: {
'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',
};
});9. Apply customized styles to the Datetime Picker element.
new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
styles: {
active_background: '#e34c26',
active_color: '#fff',
inactive_background: '#0366d9',
inactive_color: '#fff'
},
});10. Store the DateTime choice in a hidden input.
<!-- Date Picker --> <div id="datepicker"> <input type="hidden" class="date_output" value="2030-05-22"> </div> <!-- Date Range Picker --> <div id="start1"> <!-- Overwrites start_date --> <input type="hidden" class="date_output" value="2030-05-22"> </div> <div id="end1"> <!-- Overwrites end_date --> <input type="hidden" class="date_output" value="2030-05-22T10:00:00"> </div>
Feature-rich Datetime Picker Component, DateTimePickerComponent Plugin/Github
Params
| Property | Type | Default | Description |
|---|---|---|---|
id | {string} | None | Id of the div element where to append the component. An error is thrown if no value or invalid value is passed |
[settings] | {object} | {} | Object with user defined settings |
| Property | Type | Default | Description |
|---|---|---|---|
start_id | {string} | None | Id of the start date div element. An error is thrown if no value or invalid value is passed |
end_id | {string} | None | Id of the end date div element. An error is thrown if no value or invalid value is passed |
[settings] | {object} | {} | Object with user defined settings |
Settings
All classes support these properties in settings object. All *_date properties can be a date string (in ISO format) or a date object.
| Property | Type | Default | Description |
|---|---|---|---|
first_date | {Date|string} | Current date | First selectable date. |
start_date | {Date|string} | One day more than current date | Start selected date |
last_date | {Date|string} | One year more than start_date | Last selectable date |
first_day_no | {number} | 0 (Sunday) | Day the week must start with. Accepted range values are 0-6 where 0 means Sunday, 1 means Monday and so on |
date_output | {string} | "short_ISO" or "full_ISO" | The date format returned to the value attribute of input.date_output. Accepted values are short_ISO (default for Date* classes, e.g. "2030-01-05"), full_ISO (default for DateTime* classes, e.g. "2021-07-16T09:30:00") and timestamp (without milliseconds). |
l10n | {object} | Object with English strings | Object with strings for translation |
styles | {object} | {} | Object with custom styles |
Only the Date*RangePicker classes also support these properties:
| Property | Type | Default | Description |
|---|---|---|---|
end_date | {Date|string} | One day more than start_date | End selected date |
min_range_hours | {number} | 1 | The minimum range expressed in hours that must elapse between start_date and end_date |
See Demo And Download
Official Website(marcellosurdi): Click Here
This superior jQuery/javascript plugin is developed by marcellosurdi. For extra Advanced usage, please go to the official website.