This widget can be used to display a Realtime Analog Clock besides as a Timepicker. As a timepicker, this widget can be directly draggable at both hour hand and minute hand. Drag at behind the axis of both hands which causes reverse rotation is also supported. Dragging on touch devices are supported well. Dragging at the both clock hands are very smoothly, no matter how much angle of rotation have been made by your finger or mouse pointer, over there the appropriate hand will point at without lagging nor leading even a little.
Demo here.
No dependencies even css file.
Simply put this code snippet to anywhere you want in the body of your html file:
<div id="timepicker"></div>
<script type="text/javascript" src="timepicker.js"></script>
<script type="text/javascript">
let timepicker = new Timepicker();
document.getElementById('timepicker').appendChild(timepicker.getElement());
// or use
// timepicker.attachTo(document.getElementById('timepicker'));
// other code
</script><div id="timepicker"></div>
<script type="text/javascript" src="https://zulns.github.io/Timepicker.js/timepicker.js"></script>
<script type="text/javascript">
let timepicker = new Timepicker();
document.getElementById('timepicker').appendChild(timepicker.getElement());
// or use
// timepicker.attachTo(document.getElementById('timepicker'));
// other code
</script>API doc here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent