Clock-Style Time Picker In Jquery

In this tutorial, we are creating an input with a clock-style time picker jquery and bootstrap.It works like a popup date picker in input type date.But we do not get any picker when we define a type time in an input. So, here we using a jquery and bootstrap plugin to design a clock-style picker in jquery.This plugin used both jquery and bootstrap.So if bootstrap is already added in your project, you can use a jquery plugin to create clock style time picker in your form element.

This supports almost all major browser in which we are using know days.Event supports IE 9+ and

First, we need to link a CSS and jquery file to the HTML page…

<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 we add input which displays a clock-style picker.

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

Last step to add clockpicker() function on page tp show clock-style time picker.

<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

We can also add some options to clock-style time picker.

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

we can define placement of clock time picker popup position.

Clock-style time picker in jquery Example:

<!DOCTYPE html>
<html>
<head>
<title>Clock-Style Time Picker in jquery</title>
<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>
</head>
<body>
<div class="input-group clockpicker">
    <input type="text" class="form-control" value="13:00">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

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

If you have any query related to this post. Feel free to write your comment on the comment box.

Don’t Forget to Share this post if you like it.

1 Comment

  • I was just searching for this info for a while. After six hours of continuous
    Googleing, finally, I got it on your site. I wonder what’s the lack of Google strategy that doesn’t run this kind of informative web sites in top of the list.Thank you for information.

Leave a Reply

Your email address will not be published. Required fields are marked *