Analog Clock Timepicker In Vanilla JavaScript

Category: Date & Time , Javascript | March 6, 2019
Author:ZulNs
Views Total:2,215 views
Official Page:Go to website
Last Update:March 6, 2019
License:MIT

Preview:

Analog Clock Timepicker In Vanilla JavaScript

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)

 

You Might Be Interested In:


Leave a Reply