Configurable Open Source DateTime Picker in Javascript

by Posted on

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.
javascript-date-time-picker
Features

  • 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



Libraries

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>

HTML

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

<input type="text" class="tail-datetime-field" />
<pre>
 
<h4>JS</h4>
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", { /* Your Options */ });
            });
        </script>




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

tail.DateTime(".tail-datetime-field", {
    animate: true,
    classNames: false,
    closeButton: true,              // New in 0.4.5
    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,                // New Syntax in 0.4.5
    timeMinutes: null,              // New Syntax in 0.4.5
    timeSeconds: 0,                 // New Syntax in 0.4.5
    timeIncrement: true,            // New in 0.4.5
    timeStepHours: 1,
    timeStepMinutes: 5,             // New in 0.4.3
    timeStepSeconds: 5,             // New in 0.4.3
    today: true,
    tooltips: [],
    viewDefault: "days",
    viewDecades: true,
    viewYears: true,
    viewMonths: true,
    viewDays: true,
    weekStart: 0
});

See live demo and download source code.

DEMO | DOWNLOAD

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


Published by admin