Powerful Datetime Picker Library- tail.DateTime

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

Preview:

Powerful Datetime Picker Library- tail.DateTime

Description:

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.

tail.DateTime("#demo");

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", {

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

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

  // local
  locale: "en",

  // RTL or LTR
  rtl: "auto",

  // 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"
tail.switchView(view)

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

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

// switch years
tail.switchYear(year)

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

// fetch the current available / selectable date and time within the respective interface
tail.fetchDate(date)

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

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

// open the datetime picker
tail.open()

// close the datetime picker
tail.close()

// toggle the datetime picker
tail.toggle()

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

// remove the instance
tail.remove()

// reload the datetime picker
tail.reload()

Events handlers.

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

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

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

Changelog:

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