timedropper jQuery UI timepicker example

448 views 1 year ago jQuery

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.

Options

You can change behaviour passing option object.

$('#time-dropper').timeDropper({
    format: 'hh:mm'
});

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>

If you ever need to add time picker, just give it try.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]