In this article, we will show how to use timepicker in laravel 5 application. Sometime we need to get specific time from client at that time if we use timepicker then will be good. So if you are using laravel and bootstrap then it is very simple to use timepicker. we will use bootstrap datetimepicker jquery plugin for timepicker. datetimepicker plugin provide several options to configure like change formate as you want etc.
Here, you can easily use timepicker in your laravel blade file as like bellow:
your.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Bootstrap Timepicker</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel Bootstrap Timepicker</h1>
<div style="position: relative">
<strong>Timepicker:</strong>
<input class="timepicker form-control" type="text">
</div>
</div>
<script type="text/javascript">
$('.timepicker').datetimepicker({
format: 'HH:mm:ss'
});
</script>
</body>
</html>
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example