Minimal Timer Picker With Pure JavaScript

Category: Date & Time , Javascript | June 20, 2016
Author: Via-profit
Views Total: 4,650
Official Page: Go to website
Last Update: June 20, 2016
License: MIT

Preview:

Minimal Timer Picker With Pure JavaScript

Description:

A JavaScript/CSS only timer picker where you can select a time from a popup with separated hours/minutes selection panels.

How to use it:

Load the js-timepicker.css and js-timepicker.js in your html document.

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

Create an input field to accept the time selection.

<input type="text" name="demo">

Active the time picker on the input field you created.

window.picker = new JsTimepicker(document.querySelector('[name="demo"]'), {
  // options here
});

Default settings.

window.picker = new JsTimepicker(document.querySelector('[name="demo"]'), {
  hourLeadingZero: true,
  hourStep: 1,
  minuteLeadingZero: true,
  minuteStep: 5
});

You Might Be Interested In:


One thought on “Minimal Timer Picker With Pure JavaScript

  1. Nazareno Delucca

    very nice, would it be easy to hide the picker when click on the minutes?

    Reply

Leave a Reply