timedropper jQuery UI timepicker example
Sometimes, you may need to add time input field for appointments, scheduling task etc. The default time field is simple like text or date input. If you are building attractive form UI, then you need to either design by your own or use plugin. You can't design time field by self if you are not good designer. You need to use plugin which saves a time building responsive design.
timedropper is a free, simple, and customizable jQuery UI timepicker for websites and apps forms. You can simply install plugin and set css selector. That's it. timepicker also provides many options tocustomize.
In this article, I will share you how you can create beautiful timepicker using timedropper plugin.
Installation
Go to the website website and login to download plugin. Then you will be able to download timedropper source files for a direct integration into your site. Then add timedropper.js to the <head> of the pages on where you want to use timedropper.js. You also meed to install jQuery CDN before you use timedropper.js.
<head>
<script src="path/to/timedropper.css"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="path/to/timedropper-jquery.js"></script>
</head>
Add input tag where you want to initialize timedropper.js.
<input type="text" id="time-dropper">
And initialize timedropper.js using css selector.
<script type="text/javascript">
$('#time-dropper').timeDropper();
</script>
That's it. This will create time picker as below.
Options
You can change behaviour passing option object.
$('#time-dropper').timeDropper({
format: 'hh:mm'
});
You can find options here.
You can add below CSS variables directly to change default CSS stylesheets.
<style type="text/css">
:root {
--td-textColor: #555555;
--td-backgroundColor: #FFF;
--td-primaryColor: #6E99FF;
--td-displayBackgroundColor: #FFF;
--td-displayBorderColor: #6E99FF50;
--td-displayBorderStyle: solid;
--td-displayBorderWidth: 4px;
--td-handsColor: #6E99FF50;
--td-handleColor: #6E99FF;
--td-handlePointColor: white;
}
</style>
Here you can find demo example.
If you ever need to add time picker, just give it try.
Copyright 2024 ErrorGram