Author: | leongersen |
---|---|
Views Total: | 2,319 views |
Official Page: | Go to website |
Last Update: | February 29, 2020 |
License: | MIT |
Preview:

Description:
noUiDatePicker is a minimal vanilla JavaScript date pick that enables the users easily select a date from a specific date range.
How to use it:
Add the following JavaScript and CSS files to the webpage.
<link href="picker.css" rel="stylesheet"> <script src="picker.js"></script>
Create the html for the date picker input. You’re allowed to specify the date range using ‘min’ and ‘max’ attributes:
<input class="date-input-native" id="date" type="date" name="date" min="2016-11-03" max="2017-02-11"> <input class="date-input-fallback" id="alt" type="text" placeholder="Pick A Date"> <div id="picker" hidden></div>
The JavaScript to activate the date picker.
(function(){ 'use strict'; var dayNamesShort = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var icon = '<svg viewBox="0 0 512 512"><polygon points="268.395,256 134.559,121.521 206.422,50 411.441,256 206.422,462 134.559,390.477 "/></svg>'; var root = document.getElementById('picker'); var dateInput = document.getElementById('date'); var altInput = document.getElementById('alt'); var doc = document.documentElement; function format ( dt ) { return Picker.prototype.pad(dt.getDate()) + ' ' + monthNames[dt.getMonth()].slice(0,3) + ' ' + dt.getFullYear(); } function show ( ) { root.removeAttribute('hidden'); } function hide ( ) { root.setAttribute('hidden', ''); doc.removeEventListener('click', hide); } function onSelectHandler ( ) { var value = this.get(); if ( value.start ) { dateInput.value = value.start.Ymd(); altInput.value = format(value.start); hide(); } } var picker = new Picker(root, { min: new Date(dateInput.min), max: new Date(dateInput.max), icon: icon, twoCalendars: false, dayNamesShort: dayNamesShort, monthNames: monthNames, onSelect: onSelectHandler }); root.parentElement.addEventListener('click', function ( e ) { e.stopPropagation(); }); dateInput.addEventListener('change', function ( ) { if ( dateInput.value ) { picker.select(new Date(dateInput.value)); } else { picker.clear(); } }); altInput.addEventListener('focus', function ( ) { altInput.blur(); show(); doc.addEventListener('click', hide, false); }); }());
Changelog:
02/29/2020
- v1.1.2: preventDefault on delegated events
12/14/2019
- v1.1.1
Dont work in Safari, Stupid Safari… Crome and Firefox, excelent, Thanks…