Toque-amigable reloj selector de tiempo plugin-clocklet

Vista prévia

Descripción

clocklet es un plugin de selector de tiempo simple, configurable y amigable con el tacto escrito en JavaScript puro.

El complemento TimePicker permite al usuario seleccionar una hora en horas, minutos desde una ventana emergente de estilo de reloj cuando se activa.

AM (12 horas) y PM (24 horas) también son compatibles.

See also:

• Top 10 bibliotecas de selector de fecha y hora de JavaScript

Funcionamiento

Importar el plugin de clocklet JavaScript y StyleSheet en el documento HTML.

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

Para inicializar el selector de hora del reloj de forma aumáticamente, simplemente agregue el atributo Data-clocklet a un campo de entrada como este:

<input data-clocklet maxlength="5" value="02:25">

Para config el selector de hora del reloj, pase las siguientes opciones al atributo Data-clocklet :

<input data-clocklet data-clocklet="format: _H:_m;" maxlength="5" value="02:25">

{

className: '',

format: 'HH:mm',

placement: 'bottom', // or 'top'

alignment: 'left', // or 'rignt'

appendTo: 'body',

zIndex: '',

dispatchesInputEvents: true
}

Available event handlers:

<input class="event" data-clocklet maxlength="5" value="02:25">

var instance = document.querySelector('.event');

instance.addEventListener('clocklet.opening', function (event) {

console.log(event.type, event.target.value, event.detail.options);

if (document.querySelector('.clocklet-cancel-opening').checked) {


event.preventDefault();

}
});

instance.addEventListener('clocklet.opened', function (event) {

console.log(event.type, event.target.value, event.detail.options);
});

instance.addEventListener('clocklet.closing', function (event) {

console.log(event.type, event.target.value);

if (document.querySelector('.clocklet-cancel-closing').checked) {


event.preventDefault();

}
});

instance.addEventListener('clocklet.closed', function (event) {

console.log(event.type, event.target.value);
});

instance.addEventListener('input', function (event) {

console.log(event.type, event.target.value, event.target.value);
});

Registro de cambios

v0.2.4 (03/09/2019)

• Corregido: adjuntar al formulario resultado en efecto secundario no deseado de envío de formulario

v0.2.3 (06/24/2018)

• problema de ubicación de corrección que se produce cuando APPEND-TO es "Parent" y el elemento primario es un Flexbox