Simple and Lightweight Datetime Picker Component With JavaScript

datetime-picker-component

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_date and last_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>

Datetime-Picker-marcellosurdi

Feature-rich Datetime Picker Component, DateTimePickerComponent Plugin/Github

Params

PropertyTypeDefaultDescription
id{string}NoneId 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
PropertyTypeDefaultDescription
start_id{string}NoneId of the start date div element. An error is thrown if no value or invalid value is passed
end_id{string}NoneId 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.

PropertyTypeDefaultDescription
first_date{Date|string}Current dateFirst selectable date.
start_date{Date|string}One day more than current dateStart selected date
last_date{Date|string}One year more than start_dateLast 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 stringsObject with strings for translation
styles{object}{}Object with custom styles

Only the Date*RangePicker classes also support these properties:

PropertyTypeDefaultDescription
end_date{Date|string}One day more than start_dateEnd selected date
min_range_hours{number}1The 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.