Selector de fecha de limpieza mínimo para el campo de entrada-noUiDatePicker

Vista prévia

Descripción

noUiDatePicker es un picking de fecha JavaScript mínimo de vainilla que permite a los usuarios seleccionar fácilmente una fecha de un intervalo de fechas específico.

Funcionamiento

Agregue los siguientes archivos JavaScript y CSS a la Página Web.

<link href="picker.css" rel="stylesheet">
<script src="picker.js"></script>

Cree el código HTML para la entrada del selector de fecha. Se le permite especificar el intervalo de fechas utilizando los atributos ' min ' y ' Max ':

<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>

El JavaScript para activar el selector de fecha.

(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);

});

}());