Feature-rich Datetime Picker Component With JavaScript

Category: Date & Time , Javascript | August 2, 2021
Views Total:1,410 views
Official Page:Go to website
Last Update:August 2, 2021


Feature-rich Datetime Picker Component With JavaScript


A responsive, multilingual, feature-rich, and easy-to-customize date, time, and date range picker component written in JavaScript.

How to use it:

1. Install and download the 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 basic date picker.

<div id="datepicker"></div>
new DatePicker('datepicker');
// browser
new DateTimePickerComponent.DatePicker('datepicker');

4. Create a basic date & time picker.

<div id="datetimepicker"></div>
new DateTimePicker('datetimepicker');
// browser
new DateTimePickerComponent.DateTimePicker('datetimepicker');

5. Create a basic 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 component.

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

new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
    l10n: {

9. Apply custom styles to the Datetime Picker component.

new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
    styles: {
      active_background: '#e34c26',
      active_color: '#fff',
      inactive_background: '#0366d9',
      inactive_color: '#fff' 

10. Store the datetime selection in a hidden input.

<!-- Date Picker -->
<div id="datepicker">
  <input type="hidden" class="date_output" value="2030-05-22">
<!-- Date Range Picker -->
<div id="start1">
  <!-- Overwrites start_date -->
  <input type="hidden" class="date_output" value="2030-05-22">
<div id="end1">
  <!-- Overwrites end_date -->
  <input type="hidden" class="date_output" value="2030-05-22T10:00:00">



  • v1.1.2: Fixed settings.date_output result when set to timestamp. Now the same value is always returned regardless of the user’s time zone.


  • v1.1.0: Added an alternative time picker with two select elements, one for the hours and one for the minutes. Minutes are rounded to the round_to value and his multiples


  • v1.0.10


  • v1.0.9


  • v1.0.8

You Might Be Interested In:

Leave a Reply