Pure JavaScript Date & Time Picker – MTR Datepicker

Preview:

Description:

A pure JavaScript date picker which enables the user to select a date & time by using up / down arrows or mouse wheel.

Installation:

# NPM
$ npm install mtr-datepicker --save

Basic usage:

Add the core stylesheet into the head section of the web page.

<link rel="stylesheet" href="dist/mtr-datepicker.min.css">

Add a theme CSS of your choice to the web page.

<link rel="stylesheet" href="dist/mtr-datepicker.default-theme.min.css>
<!-- OR -->
<link rel="stylesheet" href="dist/mtr-datepicker.clutterboard-theme.min.css>

Load the timezone picker plugin if needed.

<script src="mtr-datepicker-timezones.min.js"></script>

Load the main script.

<script src="mtr-datepicker.min.js"></script>

Create a DIV element that will be served as the container for the date picker.

<div id="demo"></div>

Initialize the date picker.

datepickerDefault = new MtrDatepicker({
  target: "demo",
});

The main configuration properties. All of them can be overided by the ini method.

targetElement: null,
defaultValues: {
  hours:        [],
  minutes:      [],
  dates:        [],
  datesNames:   [],
  months:       [],
  years:        [],
},
hours: {
  min: 1,
  max: 12,
  step: 1,
  maxlength: 2
},
minutes: {
  min: 0,
  max: 50,
  step: 10,
  maxlength: 2
},
months: {
  min: 0,
  max: 11,
  step: 1,
  maxlength: 2
},
years: {
  min: 2000,
  max: 2030,
  step: 1,
  maxlength: 4
},
animations: true,       // Responsible for the transition of the sliders - animated or static
smartHours: false,      // Make auto swicth between AM/PM when moving from 11AM to 12PM or backwards
future: false,          // Validate the date to be only in the future
disableAmPm: false,     // Disable the 12 hours time format and go to a full 24 hours experience
validateAfter: true,    // perform the future validation after the date change
utcTimezone: 0,         // change the local timezone to a specific one, e.g. 'Europe/London', 'DST', etc
transitionDelay: 100,
transitionValidationDelay: 500,
references: { // Used to store references to the main elements
  hours: null
},
monthsNames: {
  0: "Jan",
  1: "Feb",
  2: "Mar",
  3: "Apr",
  4: "May",
  5: "Jun",
  6: "Jul",
  7: "Aug",
  8: "Sep",
  9: "Oct",
  10: "Nov",
  11: "Dec",
},
daysNames: {
  0: "Sun",
  1: "Mon",
  2: "Tue",
  3: "Wed",
  4: "Thu",
  5: "Fri",
  6: "Sat",
},
timezones: null

Format the date time.

datepickerDefault.format('D.M.Y h:m A');

Event handlers.

demoDatepicker.onChange('time', function() {
  /* All Supported Properties:
     hour
     minute
     ampm
     time
     day
     month
     year
     date
     all
  */
});
demoDatepicker.beforeChange('date', function() {
  // put you code here
});

Changelog:

v0.3.11 (07/15/2020)

• Fixed minutes output when the value is less than 10
• Added a way to apply the changed of the input after an enter key press
• Added ability to control the order of the date fields
• Other minor bugs fixes and improvements

v0.3.10 (06/30/2020)

• Added ability to input values with leading zero

v0.3.9 (06/26/2020)

• Fix toUTCString() methods when timezones are used

06/25/2020

• Fixed bugs with timezone support

01/06/2020

• Packages updates

08/03/2018

• v0.2.8: added timezones plugin