Analog Clock Time Picker Plugin In Vanilla JavaScript – Timepicker.js

Preview:

Description:

Timepicker.js is a fancy time picker plugin which allows the user to select a time by dragging the clock hands in an analog clock interface.

Also supports AM/PM and touch events.

How to use it:

Import the Timepicker.js and Timepicker.css into the HTML document.

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

Generate a basic analog clock inside a container.

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

Attach the analog clock time picker to an input field.

<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: enable/disable clock mode
• is24HoursSystem: 24 hours system
• hour: specify the current hour
• minute: specify the current minute
• second: specify the current second

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)

Changelog:

05/02/2019

• Update timepicker.js