Laravel timepicker example using bootstrap datetimepicker plugin

April 28, 2017 | Category : Laravel 5 JQuery Plugin JQuery HTML Bootstrap Laravel

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 ?

New Articles

Blog Categories

Random Articles