Plugin de selector de tiempo de reloj analógico en Vanilla JavaScript-TimePicker. js

Vista prévia

Descripción

TimePicker. js es un plugin de selector de tiempo elegante que permite al usuario seleccionar una hora arrastrando las manecillas del reloj en una interfaz de reloj analógico.

También es compatible con AM/PM y eventos táctiles.

Funcionamiento

Importe el TimePicker. js y TimePicker. CSS en el documento HTML.

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

Genere un reloj analógico básico dentro de un contenedor.

<div id="clock"></div>

var clock = new Timepicker(true);
document.getElementById('clock').appendChild(clock.getElement());
clock.show();

clock.callback = function() {

clock.show(); // prevent the widget from being closed
};

Adjunte el selector de hora del reloj analógico a un campo de entrada.

<input id="picked-text" type="text">
<input id="pick-button" type="button" onclick="pickATime();" value="pick" />
<div id="timepicker"></div>

var pickedTxt = document.getElementById('picked-text'),


pickBtn = document.getElementById('pick-button'),


timepicker = new Timepicker();

document.getElementById('timepicker').appendChild(timepicker.getElement());

timepicker.getElement().style.marginTop = '10px';

timepicker.callback = function() {

pickBtn.style.display = 'inline-block';

pickedTxt.value = timepicker.getTimeString();

pickedTxt.selectionStart = 0;

pickedTxt.selectionEnd = pickedTxt.value.length;

pickedTxt.focus();
};

function pickATime() {

pickBtn.style.display = 'none';

pickedTxt.value = '';

timepicker.show();
}

Available parameters.

• isClockMode: activar/desactivar el modo de reloj
• is24HoursSystem: sistema de 24 horas
• hora: especifique la hora actual
• minuto: especifique el minuto actual
• segundo: especifique el segundo actual

new Timepicker(isClockMode, is24HoursSystem, hour, minute, second);

API methods.

// change the clock mode
timepicker.changeClockMode()

// toggles between 24 hours and 12 hours systems
timepicker.changeHourSystem()

// destroy the library
timepicker.destroy()

// gets the container element
timepicker.getElement()

// gets the selected hours/minutes
timepicker.getHours()
timepicker.getMinutes()

// gets the time string
timepicker.getTimeString()

// hides the timepicker
timepicker.hide()

// checks if is 24 hours system
timepicker.is24HoursSystem()

// checks if is clock mode
timepicker.isClockMode()

// checks if is hidden
timepicker.isHidden()

// sets custom CSS styles
timepicker.setDisplayStyle(style)

// sets hours/minutes/seconds
timepicker.setHours(hours)
timepicker.setMinutes(minutes)
timepicker.setSeconds(seconds)