Powerful Datetime Picker Library- tail.DateTime

Category: Date & Time , Javascript , Recommended | July 2, 2019
Author: pytesNET
Views Total: 1,959
Official Page: Go to website
Last Update: July 2, 2019
License: MIT


Powerful Datetime Picker Library- tail.DateTime


The tail.DateTime JavaScript library lets you create beautiful, mobile-compatible, multi-language date and/or time picker on the web app.

How to use it:

Download and insert the tail.DateTime library’s files into the html file.

<link rel="stylesheet" href="css/tail.datetime.css">
<script src="js/tail.datetime.js"></script>

Insert the theme & language files into the html file (OPTIONAL).

<link rel="stylesheet" href="css/tail.datetime.white.css">
<script src="langs/tail.datetime-de.js"></script>
<script src="langs/tail.datetime-es.js"></script>

Create an input field to hold the selected date & time.

<input type="text" id="demo" class="demo">

Create a placeholder element for the calendar (OPTIONAL).

<div id="datetime-demo-holder" class="datetime-folder"></div>

Initialize the tail.DateTime to attach the date picker to the input field.


To always show the calendar UI.

tail.DateTime("#demo", {
  position: "#datetime-demo-holder", 
  startOpen: true,
  stayOpen: true

Set the date format. Set to false to disable the date picker (time picker only).

tail.DateTime("#demo", {
  dateFormat: 'YYYY-mm-dd'

Set the date range.

tail.DateTime("#demo", {
  dateRanges: [
    // Will Disable 05-JAN -> 07-JAN completely
      start: new Date(2018, 0, 5),
      end: new Date(2018, 0, 7)
      /* days: true */                // This is the default

    // Will Disable Each Sunday and Saturday in FEB
      start: new Date(2018, 1, 1),
      end: new Date(2018, 1, 28),
      days: ["SUN", "SAT"]

    // Will Disable Each Sunday and Saturday in General
      days: ["SUN", "SAT"]

Set the position relative to the input field.

tail.DateTime("#demo", {
  // "top", "left", "right" or "bottom"
  position: "bottom"

Set the date and time formats.

tail.DateTime("#demo", {
  dateFormat: "YYYY-mm-dd",
  timeFormat: "HH:ii:ss"

Change the first day in the week.

tail.DateTime("#demo", {
  weekStart: 0 // Sunday

Whether to set the seconds to 00.

tail.DateTime("#demo", {
  zeroSeconds: false

Set the start/end dates.

tail.DateTime("#demo", {

  // string, new Date() or integer
  dateStart: false,
  dateEnd: false

Append tooltips to the datetime picker.

tail.DateTime("#demo", {

  tooltips: [
      date: "2018-01-01",
      text: "New Year",
      color: "#ff0000"


Customize the calendar view.

tail.DateTime("#demo", {

  // "days" (default), "months", "years" or "decades"
  viewDefault: "days", 

  // allows decade/year/month/day view
  viewDecades: true, 
  viewYears: true, 
  viewMonths: true,
  viewDays: true


More possible options to customize the datetime picker.

tail.DateTime("#demo", {

  // enable animation
  animate: false,

  // Boolean, String, Array, null
  classNames: false,

  // use false to use dateRanges as Whitelist:
  dateBlacklist: true,  

  // add a close Button to the DateTime picker
  closeButton: true,

  // ar, cs, de, el, es, fi, fr, it, nl, no, pl, ru, tr
  locale: "en",

  // RTL or LTR
  rtl: "auto",

  // use the AM/PM selector instead of the 24-h format
  time12h: false,

  // define default hours, minutes, and seconds
  timeHours: null,
  timeMinutes: null,
  timeSeconds: 0,

  // increase the next unit on loop of the previous one
  timeIncrement: true,

  // change the step size of the input fields
  timeStepHours: 1,
  timeStepMinutes: 5,
  timeStepSeconds: 5,

  // show a small tick (circle) above the current day, month, year and decade
  today: true


API Methods:

// switch calendar views
// "days", "months", "years" or "decades"

// switch dates
tail.switchDate(year, month, day, none)

// switch months
tail..switchMonth(month, year)

// switch years

// pass "prev" (or previous) or "next" to load the "next" or "previous" page of the current view.

// fetch the current available / selectable date and time within the respective interface

// select a datetime
tail.selectDate(year, month, date, hours, minutes, seconds)

// select a time
tail.selectTime(hours, minutes, seconds)

// open the datetime picker

// close the datetime picker

// toggle the datetime picker

// event
tail.on(event, callback, args)

// remove the instance

// reload the datetime picker

Events handlers.

tail.on("open", function(){
  // on open

tail.on("close", function(){
  // on close

tail.on("change", function(){
  // on change


v0.4.14 (07/02/2019)

  • Bugfix: Changing the Hours increases the Date (per Step).

v0.4.13 (06/30/2019)

  • Added more translations.
  • Add: The new option time12h to use the AM/PM selector instead of the 24-h format.
  • Add: Custom “stepUp” and “stepDown” buttons for the new time picker input fields.
  • Add: The new internal methods this.prepare() and this.handleStep().
  • Update: The helper methods cHAS(), cADD() and cREM().
  • Update: Time Selector fields are now text fields instead of number, using inputmode to force
    the number-selectors on mobile browsers (weak support).
  • Update: Remove the initial inline styling of the DateTime container (use CSS instead).
  • Update: Define factory-global w and d variables within the factory parameter declaration.
  • Update: The options timeHours, timeMinutes and timeSeconds calculates now the time number
    using the current time and the respective timeStep* value if true is passed.
  • Update: The options timeHours, timeMinutes and timeSeconds hides the respective field if
    false is used or just “disables” them by using null.
  • Update: Use leading Zeros on the single time selectors.
  • Remove: The name attributes from the Time input fields.
  • Bugfix: The helper method clone use an IE-unsupported function called Object.assign.
  • Bugfix: Webpack issue in VueJS.
  • Bugfix: The timeIncrement function doesn’t work by using the Arrow buttons on the respective
    time input[type=number] fields.
  • Bugfix: Dates before 1970-01-01 are disabled.
  • Add: A “not-allowed” cursor on disabled time fields / custom buttons.
  • Add: Minified Stylesheets and Source Maps (for both types).
  • Add: A node.js script to compile the Less stylesheets into CSS.
  • Add: New design parts for the custom time buttons and the AM/PM switch.
  • Update: The complete Less stylesheet structure.
  • Update: A few design changes on both designs.
  • Update: Each single CSS Color scheme contains now the complete styles instead of “imports”.
  • Update: Move direction: rtl; from inline CSS to CSS stylesheet property.
  • Remove: All obsolete (not required) -o- and -moz- prefixed CSS properties.
  • Bugfix: Date picker is not positioned properly in a child scrollable container.

v0.4.12 (05/21/2019)

  • Bugfix: The new classList helper methods didn’t worked as expected.
  • Bugfix: Add correct file to the main bower variable.
  • Bugfix: Add correct file to the jsdelivr package variable.

v0.4.11 (05/21/2019)

  • Info: This is the first version, which drops IE 9 support!
  • Add: The new Norwegian Translation.
  • Add: Support for MooTools.
  • Add: Global window implementation using datetime, next to the existing DateTime, variable.
  • Update: Using classList to add / remove / check class names.
  • Update: Using Object.assign only to merge / clone object properties.
  • Update: Clone language strings (with the english ones, for backward compatibilities).
  • Rename: The internal tailDateTime variable has been renamed into datetime.
  • Remove: Support for Internet Explorer 9.
  • Remove: The jQuery jQuery().tail(“DateTime”) method (this was just a test).

v0.4.10 (04/24/2019)

  • Add: The new French Translation.
  • Bugfix: Use of undefined variable datePart in the convertDate method.
  • Bugfix: The jQuery implementation has been fixed.

v0.4.9 (04/21/2019)

  • Add: Support for module exporting, using browserfy.
  • Add: A jQuery implementation using jQuery().DateTime() or jQuery().tail(“DateTime”).
  • Update: Remove Parentheses on the typeof oeprator (’cause, it isn’t a function).
  • Update: Should close (or test with stayopen) after submit time.
  • Bugfix: Can’t resolve ‘../tail.datetime-default.css’.

v0.4.8 (02/15/2019)

  • Add: The new French Translation
  • Bugfix: Tooltips doesn’t support date range

v0.4.7 (01/31/2019)

  • Add: The new Finish Translation.

v0.4.6 (01/04/2019)

  • Add: An @import rule on the single colors, so only one file need to be included.
  • Bugfix: When showing only time picker, the calendar label says undefined.

v0.4.5 (01/01/2019)

  • Add: The new Dutch Translation.
  • Add: Increase and Loop the Time fields by clicking Up and Down.
  • Add: The new option timeIncrement, which increase the next unit on loop of the previous one.
  • Add: The new option closeButton, which adds a close Button to the DateTime picker.
  • Add: The new internal method handleTime() which handles the time events.
  • Update: The time* options allows now also false as parameter to disable the field.

v0.4.4 (12/26/2018)

  • Add: The new jsdelivr key => value in the package.json file
  • Remove: The project.synder file until the new Synder Format is finished
  • Bugfix: CDN / NPM Hotfix

v0.4.3 (12/22/2018)

  • Add: The new Italian Translation.
  • Add: The new Brazilian Portuguese Translation.
  • Add: The new options timeStep* to change the step size of the input fields.
  • Bugfix: Error in dateRanges visualization.

v0.4.2 (11/20/2018)

  • Add: The new modify() method on the string Storage to change the strings globally.
  • Update: The .register() method checks now if locale is a string and object a object.
  • Update: The .register() method returns now true on success and false on failure!
  • Bugfix: The .selectTime() method didn’t used the “already select / current viewed” date.
  • Bugfix: Changing time has no effect.
  • Bugfix: Calculations are wrong in some Environments.

v0.4.1 (11/20/2018)

  • Add: The new Arabic Translation.
  • Add: The new option rtl, which allows to display the DateTime picker in an RTL style.
  • Update: The new RTL supported Stylesheets.
  • Update: The default tooltip tick color depends now on the used theme.
  • Update: The “Enter/Escape” Key listener now also works when the cursor is within an input field.
  • Bugfix: Disabled dates could still be selected / clicked.
  • Bugfix: The keyup document event listener has fired per instance.
  • Bugfix: The “Enter” Key listener doesn’t notice / used already selected dates!
  • Bugfix: You cannot go back farther than to February of the displayed year.
  • Fix Language File

v0.4.0 (11/15/2018)

  • Added more options and API

You Might Be Interested In:

2 thoughts on “Powerful Datetime Picker Library- tail.DateTime

Leave a Reply