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.

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.

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.

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

Related