Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Analog Time Picker

Show an analog time picker so that users can input time more intuitively with a clock-style interface.

View documentation with interactive examples.

Dependencies

The analog time picker has no external dependencies. You'll just need to add the following lines to your HTML to start using the analog time picker component.

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

Examples

Inline time picker

<div id="inlinepicker"></div>
<script>
  var container = document.getElementById('inlinepicker');
  new AnalogTimePicker(container);
</script>

Popup time picker

<input type="text" id="time">
<script>
  var input = document.getElementById('time');
  new AnalogTimePicker(input);
</script>

Usage

Methods

AnalogTimePicker(element)

Initializes a time picker. If the element supplied is an <input>, the time picker will be created in a popup shown when the user starts to edit the <input>. Otherwise, the element will be a container for the time picker.

var container = document.getElementById('timepicker');
var picker = new AnalogTimePicker(container);

.getHour()

Gets the currently selected hour.

picker.getHour()

.setHour(number)

Sets the currently selected hour to the specified number.

picker.setHour(12)

.getMinute()

Gets the currently selected minute.

picker.getMinute()

.setMinute(number)

Sets the currently selected minute to the specified number.

picker.setMinute(59)

.getMode()

Gets whether the time picker is currently set to pick an hour or a minute. The returned value is 'hour' or 'minute'.

picker.getMode()

.setMode('hour' | 'minute')

Sets whether the time picker should be set to pick an hour or a minute.

picker.setMode('hour')

.showPopup()

Reveals the popup.

picker.showPopup()

.hidePopup()

Hides the popup.

picker.hidePopup()

.addEventListener(type, function)

Specify a function to call when an event of the specified type is triggered.

picker.addEventListener('timechange', function() {
  console.log('hour: ' + this.getHour() + ' minute: ' + this.getMinute());
})

.removeEventListener(type, function)

Remove a previously added function from being called when an event is triggered.

picker.removeEventListener('timechange', previouslyAddedListener)

Events

Event Type Description
timechange This event is fired when the user has picked a new time.
modechange This event is fired when the user has switched to hour picking mode or minute picking mode.
popupshow This event is fired when the popup has been made visible to the user.
popuphide This event is fired when the popup has been hidden from the user.
picker.addEventListener('timechange', function() {
  // do something...
})

License

MIT

About

Show an analog time picker so that users can input time more intuitively with a clock-style interface.

Resources

License

Releases

No releases published

Packages

No packages published