Configurable Open Source DateTime Picker in Javascript

A lightweight, translat- and configurable Open Source DateTime Picker, written in pure vanilla JavaScript! The tail.DateTime Calendar Interface is written in pure vanilla JavaScript and doesn’t require any additional dependencies. It was originally a fork of MrGuiseppes Pure JS Calendar, however version 0.4.0 has separated from the last origin lines and is now completely independent.

  • A beautiful Date/Time Picker (in 2 Designs + 6 Color Schemes)
  • Definable ranges of selectable dates (Blacklist / Whitelist)
  • Colorable Tooltips with an cute animation
  • Different Views to navigate quickly: Days, Months, Years & Decades
  • Completely Translatable and available in 5 languages (de, de_AT, en, es, ru)
  • Extendable and Bindable through different Events
  • Compatible with AMD, tested with requireJS
  • Many Settings to adapt and configure the design and behavior
  • Compatible with all modern browsers (including IE 9+)
  • No Dependencies, just embed and use
  • Free/To/Use – MIT Licensed


Load the JS+CSS library on page.

<link type="text/css" rel="stylesheet" href="css/tail.datetime-default.css" />
<script type="text/javascript" src="js/tail.datetime.min.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 display the selected date & time.

<input type="text" class="tail-datetime-field" />
Initialize the tail.DateTime plugin and enable date time picker
<pre lang="javascript">
<script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.DateTime(".tail-datetime-field", {  });

here is the list of options you can use to customise the plugins

tail.DateTime(".tail-datetime-field", {
    animate: true,
    classNames: false,
    closeButton: true,              
    dateFormat: "YYYY-mm-dd",
    dateStart: false,
    dateRanges: [],
    dateBlacklist: true,
    dateEnd: false,
    locale: "en",
    position: "bottom",
    rtl: "auto",
    startOpen: false,
    stayOpen: false,
    timeFormat: "HH:ii:ss",
    timeHours: null,                
    timeMinutes: null,              
    timeSeconds: 0,                 
    timeIncrement: true,            
    timeStepHours: 1,
    timeStepMinutes: 5,             
    timeStepSeconds: 5,             
    today: true,
    tooltips: [],
    viewDefault: "days",
    viewDecades: true,
    viewYears: true,
    viewMonths: true,
    viewDays: true,
    weekStart: 0

See live demo and download source code.


This awesome plugin is developed by pytesNET. Visit their official github repository for more information and follow for future updates.