The perfect Date/Time Picker for your perfect Website / Web-Application!
The tail.DateTime script is an extensive and fully-featured Date/Time Picker, written in vanilla JavaScfript and without any dependency. It is compatible with all major browsers, starting with IE 10 and above, and is optimized for a direct use in the browser, as AMD (using requireJS) or as browserify module.
Wanna see tail.DateTime in action?
Wanna translate tail.DateTime in your language?
You really like my tail.DateTime script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)
- Beautiful. 2 different Designs in 4 / 2 color schemes...
- Extensive.
- Define Black- or Whitelists...
- Use colorizable tooltips...
- Restrict the date/time selection...
- ... and way more ...
- Configurable. 30 settings and 4 bindable events...
- Translatable. Already available in 17 languages...
- Zero Dependencies. And written in vanilla JavaScript...
- Free/To/Use. Because it's MIT licensed <3
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
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/
- MrGuiseppe for the Inspiration
- Octicons for the cute Icons
- jsCompress for the Compressor
- prismJS for the Syntax highlighting library [used on the demo]
- MenuSpy for the Menu Navigation [used on the demo]
- Mohammed Alsiddeeq Ahmed / Arabic Translation
- Júnior Garcia / Brazilian Portuguese Translation
- mickeybyte / Dutch Translation
- noxludio / Finnish Translation
- FlashPanther / French Translation
- Fabio Di Stasio / Italian Translation
- Murat Pala / Turkish Translation
- Lars Athle Larsen / Norwegian Translation
- Jacob273 / Polish Translation
- elPesecillo / Spanish Mexican Translation
- Milan Kyncl / Czech Translation
- tsakal / Greek Translation
The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.
- Install & Embed
- Default Usage
- Public Options
- Public Methods
- Events & Callbacks
- Internal Variables & Methods
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>Please check out GitHubs Wiki Pages to read more about each single option!
tail.DateTime(".tail-datetime-field", {
animate: true, // [0.4.0] Boolean
classNames: false, // [0.3.0] Boolean, String, Array, null
closeButton: true, // [0.4.5] Boolean
dateFormat: "YYYY-mm-dd", // [0.1.0] String (PHP similar Date)
dateStart: false, // [0.4.0] String, Date, Integer, False
dateRanges: [], // [0.3.0] Array
dateBlacklist: true, // [0.4.0] Boolean
dateEnd: false, // [0.4.0] String, Date, Integer, False
locale: "en", // [0.4.0] String
position: "bottom", // [0.1.0] String
rtl: "auto", // [0.4.1] String, Boolean
startOpen: false, // [0.3.0] Boolean
stayOpen: false, // [0.3.0] Boolean
time12h: false, // [0.4.13][NEW] Boolean
timeFormat: "HH:ii:ss", // [0.1.0] String (PHP similar Date)
timeHours: true, // [0.4.13][UPD] Integer, Boolean, null
timeMinutes: true, // [0.4.13][UPD] Integer, Boolean, null
timeSeconds: 0, // [0.4.13][UPD] Integer, Boolean, null
timeIncrement: true, // [0.4.5] Boolean
timeStepHours: 1, // [0.4.3] Integer
timeStepMinutes: 5, // [0.4.3] Integer
timeStepSeconds: 5, // [0.4.3] Integer
today: true, // [0.4.0] Boolean
tooltips: [], // [0.4.0] Array
viewDefault: "days", // [0.4.0] String
viewDecades: true, // [0.4.0] Boolean
viewYears: true, // [0.4.0] Boolean
viewMonths: true, // [0.4.0] Boolean
viewDays: true, // [0.4.0] Boolean
weekStart: 0 // [0.1.0] String, Integer
});Published under the MIT-License; Copyright © 2018 - 2019 SamBrishes, pytesNET