In this example, I'll provide you with a straightforward way to add a timepicker to your PHP application or HTML using the datetimepicker library. By simply copying and pasting the code below, you can integrate a time picker without the need for additional installations. This example utilizes the popular Bootstrap datetimepicker library, allowing you to easily set both date and time pickers. Explore the following code for a quick implementation:
I have configured the format as "HH:mm:ss" in this example, but feel free to customize the format according to your preferences. You can easily modify it to suit your needs, such as using "HH:mm" or any other format of your choice. Take a look at the following code, and feel free to adjust the format as per your requirements.
Bootstrap Timepicker using Datetimepicker JS Example
Example:
<html lang="en">
<head>
<title>Bootstrap Timepicker Example</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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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" style="margin-top: 20px">
<div style="position: relative">
<input class="form-control" type="text" id="time"/>
</div>
</div>
<script>
$('#time').datetimepicker({
format: 'HH:mm:ss'
});
</script>
</body>
</html>
Thank you for reading this guide!
