How to use Digital Clock picker with AM PM using clockface ?

Now in this post i will show you How to use Digital Clock picker with AM PM using clockface plugin? Here I am going to share with you an example of how we can implement the bootstrap digital timepicker with am pm by using clockface plugin.

We generally sometimes need to use the timepicker when we are work on any large application or product base application for the storing time. So there are the several plugin for the timepicker in jquery. But if we are using the bootstrap and then we need to use digital clock time picker then we can choose the clockface.js plugin.

By using the clockface plugin we can easily get the digital clock picker also with the best layout. We can also easily customize the timepicker like we can add the am pm, without ap pm etc. So, now i am think it is better if we are choose clockface plugin for the timepicker.

Now in this post, i am going to give you a very basic also full example. So in this example i will use the following files:

1)bootstrap.min.css

2)jquery.min.js

3)clockface.js

4)clockface.css

Example:
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap - Digital Clock picker with AM PM example using clockface plugin</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://demo.itsolutionstuff.com/plugin/clockface.js"></script>
	<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/clockface.css">
</head>
<body>


<div class="container">
	<h2>Basic Form</h2>
	<form>
		<div class="form-group">
			<label>Product:</label>
			<input type="text" name="product" class="form-control">
		</div>
		<div class="form-group">
			<label>Select Time:</label>
			<input type="text" name="time" class="sel-time form-control">
		</div>
		<div class="form-group">
			<label>Select Time With AM PM:</label>
			<input data-format="hh:mm A" class="form-control sel-time-am" type="text">
		</div>
		<div class="form-group">
			<button class="btn btn-success">Submit!</button>
		</div>
	</form>
</div>


<script type="text/javascript">
	$('.sel-time').clockface({format: 'HH:mm'});
	$('.sel-time-am').clockface(); 
</script>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.