Hermosa fecha sensible & biblioteca de selector de tiempo-selector de fecha de ventana

Vista prévia

Descripción

Una hermosa, flexible, sensible, multi-idioma, multi-tema de fecha & biblioteca de selector de tiempo implementado en JavaScript puro.

See also:

• Top 10 JavaScript & CSS fecha y componentes del selector de temporizador

Funcionamiento

Instale el selector de fecha de ventana.

# NPM
$ npm install window-date-picker --save

Importe el selector de fecha de ventana.

import WindowDatePicker from 'window-date-picker';

<!-- Or -->
<link href="dist/css/window-date-picker.css" rel="stylesheet">
<script src="dist/js/window-date-picker.js"></script>

Cree un elemento de marcador de posición para la fecha & selector de hora.

<div id="picker"></div>

Cree un campo de entrada para aceptar los valores de fecha & hora.

<input id="demo">

Cree un elemento de desencadenador para alternar la fecha & selector de hora.

<button id="toggle">Lanuch</button>

Inicialice la fecha & selector de hora y listo.

const picker = new WindowDatePicker({



el: '#picker',



toggleEl: '#toggle',



inputEl: '#demo'
});

Habilite solo selector de tiempo.

const picker = new WindowDatePicker({



el: '#picker',



toggleEl: '#toggle',



inputEl: '#demo',



type: 'HOUR'
});

Todas las opciones de configuración predeterminadas.

const picker = new WindowDatePicker({




// initial value



value: null,




// selectors



el: null,



inputEl: null,



toggleEl: null,




// or 'HOUR', 'DATEHOUR'



type: "DATE",




// date format



dateType: "DD/MM/YYYY",




// or '24'



hourType: "12",




// allows empty value



allowEmpty: true,




// shows the button



showButtons: false,




// toggles the date & time picker when clicking input



inputToggle: false,




// language



lang: 'en',




// if it is set true, up arrow increases value, down arrow decreases



orientation: false,




// shows arrow buttons



showArrowButtons: false




});

Localice la fecha & selector de hora de la siguiente manera:

export default {


DAYS_ABBR: ['', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],


MONTHS: ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],


MONTHS_ABBR: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],


AM_PM: ['AM', 'PM'],


BUTTONS: ['CANCEL', 'OK'],


INVALID_DATE: 'Invalid Date'
};

API methods.

// gets the current value
picker.get();

// sets the value
picker.set(value);

// opens the picker
picker.open();

// closes the picker
picker.close();

 // toggles the picker
picker.toggle();

// store the selection
picker.save();

// cancels the selection
picker.cancel();

// destroys the picker
picker.destroy();

Event handlers.

picker.el.addEventListener('wdp.open', () => {

// when the picker opens
});

picker.el.addEventListener('wdp.close', () => {

// when the picker closes
});

picker.el.addEventListener('wdp.save', () => {

// when the picker saves the selection
});

picker.el.addEventListener('wdp.cancel', () => {

// when the picker cancels the selection
});

picker.el.addEventListener('wdp.destroy', () => {

// when the picker destroys
});

picker.el.addEventListener('wdp.change', () => {

// when the value changed
});

Registro de cambios

04/13/2019

• agregar la opción Mostrar botones de flecha