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
You can also check :
- Phone Number Validation in HTML5
- How To Get Multiple Elements By Id Using Javascript
- How to remove duplicates from javascript array
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
Angelina
(September 28, 2017 - 7:58 am)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.