Simplest Time Picker For Text Field

Category: Date & Time , Javascript | August 14, 2018
Views Total:4,560 views
Official Page:Go to website
Last Update:August 14, 2018


Simplest Time Picker For Text Field


Just another vanilla JavaScript time picker which enables you to select a time from a dropdown select list.

How to use it:

Load the CSS file timepicker.min.css to style the time picker.

<link rel="stylesheet" href="dist/timepicker.min.css"

Create an input field on the webpage.

<input type="text" name="timepicker" data-toggle="timepicker">

Load the JavaScript file timepicker.min.js at the bottom of the webpage.

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

Config the intervals.

document.addEventListener("DOMContentLoaded", function(event)
      interval: 15



  • Opens at last selected hour

You Might Be Interested In:

One thought on “Simplest Time Picker For Text Field

  1. Arran Bell

    Thanks for the code, I’ve found a slight issue with the new code (the demo, old code, above is not effected). In the new code once the pick is initiated you can click outside (or press Esc) and the pick disappears, however the second time it does not, the only way to close the picker is to select the time again.


Leave a Reply