tail.DateTime
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?
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
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" />
</head>
<body>
<script type="text/javascript" src="js/tail.datetime.min.js"></script>
<input type="text" class="tail-datetime-field" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
tail.DateTime(".tail-datetime-field", { });
});
</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,
classNames: false,
dateFormat: "YYYY-mm-dd",
dateStart: false,
dateRanges: [],
dateBlacklist: true,
dateEnd: false,
locale: "en",
position: "bottom",
startOpen: false,
stayOpen: false,
timeFormat: "HH:ii:ss",
timeHours: null,
timeMinutes: null,
timeSeconds: 0,
today: true,
tooltips: [],
viewDefault: "days",
viewDecades: true,
viewYears: true,
viewMonths: true,
viewDays: true,
weekStart: 0
});
Copyright & License
Licensed under the MIT-License; Copyright © 2018 SamBrishes, pytesNET