How to Implement a Mobile‑Friendly Time Picker in JavaScript
Want to implement a time‑input UI in JavaScript, but find that most existing time pickers are heavy or difficult to use on mobile devices?
This page introduces mamtimepicker.js, a lightweight, mobile‑friendly time‑input dialog that works without jQuery.
Simply add a class to your input element to enable it. It also supports 5‑minute intervals, readonly fields, and other practical features useful in real‑world projects.
This is a JavaScript source code example for a time‑input dialog (time picker) that supports wheel scrolling and tapping for selecting hours and minutes.
Download mamtimepicker.js (17KB)
Download mamtimepicker.js from the button above (Right‑click → “Save link as”) and include it as an external JavaScript file.
<script src="./js/mamtimepicker.js"></script>
Add the class "mamTimePicker" to your input element (type="text") to activate the time‑input dialog.
<input type="text" class="mamTimePicker" />
That's all you need to start using the time picker.
You can change the minute interval (e.g., 5‑minute steps) by modifying the value on line 10 of mamtimepicker.js.
let per_minutes = 1; // minute step (set to 5 for 5‑minute intervals, 10 for 10‑minute intervals)
■ Example
<script src="./js/mamTimePicker.js"></script> <input type="text" class="mamTimePicker" placeholder="hh:mm" />
If you want to prevent the on‑screen keyboard (software keyboard) from appearing on smartphones, add the readonly attribute.
<script src="./js/mamTimePicker.js"></script>
<input type="text" class="mamTimePicker" placeholder="hh:mm" readonly="readonly" />