How To Add Bootstrap 5 Timepicker

In this article, we will see how to add a bootstrap 5 timepicker. Here, we will learn how to use timepicker using bootstrap and jquery. we are using the timepicker() function to display timepicker.

Timepickers in jQueryUI allow users to select time easily and visually. You can customize the time format. You can select hours, minutes, and seconds through timepicker.

So, let's see how to use bootstrap 5 timepicker, timepicker bootstrap 4/5, how to add timepicker in bootstrap 5, bootstrap timepicker jquery, and bootstrap 5 timepicker js.

The HTML provides the default input type time.

Example:

<!DOCTYPE html>
<html>
<body>
<style>
  body{
  	margin:80px;
  }
</style>
<h2>How To Add Bootstrap 5 Timepicker - Techsolutionstuff</h2>

  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">  

</body>
</html>

Output:

how_to_add_timepicker_bootstrap_5

Example:

<!DOCTYPE html>
<html lang="en">
    <head>                
        <meta charset = "UTF-8">
        <title>How To Add Bootstrap 5 Timepicker - Techsolutionstuff</title>
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">  
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">        
    </head>
    <body>
        <div class="container">
            <div class="row">    
                <div class="form-group col-md-6">
                <label for="time">Time</label>
                <div class="input-group date" id="timePicker">
                    <input type="text" class="form-control timePicker">
                    <span class="input-group-addon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                </div>
            </div>
            </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        var firstOpen = true;
        var time;

        $('#timePicker').datetimepicker({
            useCurrent: false,
            format: "hh:mm A"
        }).on('dp.show', function() {
            if(firstOpen) {
                time = moment().startOf('day');
                firstOpen = false;
            } else {
                time = "01:00 PM"
            }        
            $(this).data('DateTimePicker').date(time);
        });
    </script>    
</html>

Output:

how_to_timepicker_using_jquery

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS