Analog Clock Timepicker In Vanilla JavaScript

Preview:

Description:

A vanilla JavaScript library to create an analog clock which can be used as a time picker where the users are able to pick a time by dragging the hour & minute hands.

How to use it:

Download and import the JavaScript file timepicker.js into the document.

<script src="timepicker.js"></script>

Create a new analog clock time picker with the following parameters:

• isClockMode: is clock mode?
• is24HoursSystem: uses 24-hour clock?
• hour/minute/second: uses current local time if undefined

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

API methods.

// toggles clock mode
changeClockMode()
// toggles between 24-hour and 12-hour clock
changeHourSystem()
// destroys the clock
destroy()
// returns the clock element
getElement()
// returns the selected hours
getHours()
// returns the selected minutes
getMinutes()
// returns the selected time string
getTimeString()
// shows the clock
hide()
// hides the clock
hide()
// checks if is 24-hour clock
is24HoursSystem()
// checks if is clock mode
isClockMode()
// checks if is hidden
isHidden()
// sets styles
setDisplayStyle(style)
// sets time
setHours(hours)
setMinutes(minutes)
setSeconds(seconds)