Bootstrap Digital Clock Picker with AM PM using Clockface JS

By Hardik Savani June 17, 2023 Category : Bootstrap HTML jQuery

Today, I am going to share with you how to implement bootstrap digital timepicker with am pm using clockface plugin.

We generally require to use timepicker when we work on large application or product base application for storing time. There are several plugin for timepicker in jquery, but if you are using bootstrap and you require digital clock time picker then you have to choose clockface.js plugin.

clockface plugin through we can get digital clock picker with best layout. We can also

customize timepicker like we can add am pm, without ap pm etc. So, i think it is better if we choose clockface plugin for timepicker.

In this post, i am going to give you very basic full example, so in this example i use following files:

1)bootstrap.min.css

2)jquery.min.js

3)clockface.js

4)clockface.css

So, let's see bellow example source code and also you can see demo.

Preview:

Example:

Read Also: Laravel 10 Bootstrap Auth Scaffolding Tutorial
<!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>

You can also get more details about clockface plugin form here : Click Here.

I hope it can help you...

Tags :
Previous

Laravel Create Bootstrap Contact US Form Example
Next

Laravel Implement Flash Messages Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares