INTERFAZ de usuario del selector de fecha infinita con JavaScript puro

Vista prévia

Descripción

Un componente de selector de fecha de JavaScript puro que permite al usuario seleccionar una fecha de una interfaz de usuario de calendario de desplazamiento infinito.

Funcionamiento

Cargue la hoja de estilo principal ' Styles. css ' para dar estilo al selector de fecha.

<link rel="stylesheet" href="styles.css">

Cree un campo de texto normal para aceptar la entrada de fecha.

<input name="date" value="2017-05-31"/>

Cargue el archivo JavaScript ' DatePicker. js ' justo antes de la etiqueta del cuerpo de cierre.

<script src="datepicker.js"></script>

Inicialice el selector de fecha y ya terminamos.

var input = document.querySelector('input[name="date"]');
var picker = datepicker(input);

Detectores de eventos.

input.addEventListener('change', () => {

console.log('change', input.value);
});

input.addEventListener('input', () => {

console.log('input', input.value);
});

Todas las opciones predeterminadas para personalizar el selector de fecha.

var picker = datepicker(input,{


animation: {




duration: 200,




easing:
 'cubic-bezier(0.86, 0, 0.07, 1)'


},


behavior: {




closeOnSelect: true


},


callbacks: {




onSelect:

 null,




onOpen:


 null,




onClose:


null,




onChangeView: null


},


classNames: {




block:






'datepicker',




elementCalendar:

'calendar',




elementDay:



 'day',




elementWeek:



'week',




elementMonth:


 'month',




elementHeader:


'header',




elementMarker:


'marker',




elementButton:


'button',




elementButtonGroup: 'button-group',




elementHeading:

 'heading',




modifierActive:

 'active',




modifierToday:


'today',




modifierSelected:
 'selected',




modifierPadding:

'padding',




modifierWeekend:

'weekend',




modifierNextMonth:
'next-month',




modifierPrevMonth:
'prev-month',




modifierNextYear:
 'next-year',




modifierPrevYear:
 'prev-year',




delineatorElement:
'_',




delineatorModifier: '__'


},


transform: {




input:
null,




output: null


}
});