Analog Clock Timepicker In Vanilla JavaScript

Category: Date & Time , Javascript | March 6, 2019
Author: ZulNs
Views Total: 336
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