Pure JavaScript Date & Time Picker – MTR Datepicker

Category: Date & Time , Javascript | August 2, 2018
Author: mtrdesign
Views Total: 7,657
Official Page: Go to website
Last Update: August 2, 2018
License: MIT

Preview:

Pure JavaScript Date & Time Picker – MTR Datepicker

Description:

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

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>

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

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

Changelog:

08/03/2018

  • v0.2.8: added timezones plugin

You Might Be Interested In:


One thought on “Pure JavaScript Date & Time Picker – MTR Datepicker

Leave a Reply