A clock-style like timepicker in Jquery

by Posted on

Recently I found A awesome timepicker plugin on internet which gives you feel like clock-style timepicker. The plugin has made on both jquery and bootstrap, If your project don’t allow bootstrap you can simply use jquery library and quick integrate A clock-style timepicker in your form element.
time-picker
It support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.Both desktop and mobile device are supported. It also works great in touch screen device.



First add required libraries on page, In this tutorial i am going to use jquery time picker library.

<link rel="stylesheet" type="text/css" href="jquery-clockpicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="jquery-clockpicker.min.js"></script>

Now add html input element which display clock picker when you focus on cursor.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="19:00">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

Finally add clockpicker() function on page and pick time like clock style.

<script type="text/javascript">
$('.clockpicker').clockpicker({
    placement: 'bottom',
    align: 'left',
    donetext: 'Done'
});
</script>

You can also set clock display position like top, bottom, left, right etc.
Set click time picking action auto or on button dome conditions.



You can also manage clock picking properties by passing options with data attribute with less javascript see following example.

<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
    <input type="text" class="form-control" value="12:10">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

See live demo and download sample source code.

DEMO

DOWNLOAD

See official website for more demos and options.



Published by admin