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

Category: Date & Time , Javascript , Recommended | January 2, 2019
Author: ZulNs
Views Total: 346
Official Page: Go to website
Last Update: January 2, 2019
License: MIT

Preview:

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

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)

You Might Be Interested In:


Leave a Reply