Use a beautiful pure vanilla Date/Time Picker with the tail.DateTime JavaScript library. It doesn't need any dependencies and still offers many featured, options and functions to set up a working Calendar Interface!

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.

Wanna see tail.DateTime in action?

Wanna translate tail.DateTime in your language?

Stars 58 Issues Opened 18
Watches 2 Pull Requests 0
Forks 24 Latest Release 0.4.13
Yesterday 72 Last 7 Days 278
Last 31 Days 998 Since 2015 4016
npm install tail.datetime
yarn add tail.datetime
bower install tail.datetime

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

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using NPM (or YARN):

npm install tail.datetime --save
yarn add tail.datetime --save
bower install tail.datetime --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/tail.datetime@latest/
https://unpkg.com/tail.datetime/

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Basic Instructions

You can pass up to 2 arguments to the tail.DateTime constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.DateTime options.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link type="text/css" rel="stylesheet" href="css/tail.datetime-default.css" />
        <!-- Additional Stylesheets -->
    </head>
    <body>
        <script type="text/javascript" src="js/tail.datetime.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.datetime-{lang}.js"></script> -->

        <input type="text" class="tail-datetime-field" />

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.DateTime(".tail-datetime-field", { /* Your Options */ });
            });
        </script>
    </body>
</html>

Default Settings

Please check out GitHubs Wiki Pages to read more about each single option!

tail.DateTime(".tail-datetime-field", {
    animate: true,                  // New in 0.4.0
    classNames: false,
    dateFormat: "YYYY-mm-dd",
    dateStart: false,               // New in 0.4.0
    dateRanges: [],                 // New Syntax in 0.4.0
    dateBlacklist: true,            // New in 0.4.0
    dateEnd: false,                 // New in 0.4.0
    locale: "en",                   // New in 0.4.0
    position: "bottom",
    rtl: "auto",                    // New in 0.4.1
    startOpen: false,
    stayOpen: false,
    timeFormat: "HH:ii:ss",
    timeHours: null,                // New in 0.4.0
    timeMinutes: null,              // New in 0.4.0
    timeSeconds: 0,                 // New in 0.4.0
    today: true,                    // New in 0.4.0
    tooltips: [],                   // New in 0.4.0
    viewDefault: "days",            // New in 0.4.0
    viewDecades: true,              // New in 0.4.0
    viewYears: true,                // New in 0.4.0
    viewMonths: true,               // New in 0.4.0
    viewDays: true,                 // New in 0.4.0
    weekStart: 0
});

Copyright & License

Licensed under the MIT-License; Copyright © 2018 SamBrishes, pytesNET

This section is currently closed due to the Strict Maintenance!

Leave a Reply

avatar
  Subscribe  
Notify of
This section is currently closed due to the Strict Maintenance!

This Website sets Cookies and uses the (JavaScript) HTML 5 Storage to store user-related informations on your own Computer. It also generates an unique user ID, which gets stored in our own database (hosted in Austria, Europe) and CANNOT be traced back to you (Anonymization).

This information are used to increase your experience on www.pytes.net and allows us to count and value each single part of our Website.