bootstrap time picker 12 hour format
To display the Bootstrap time picker in 12-hour format, you can use the format option and set it to 'hh:mm A'. Here's an example of how you can implement it:
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Time Picker</h1>
<div class="form-group">
<label for="timepicker">Select Time:</label>
<input type="text" class="form-control" id="timepicker">
</div>
</div>
<!-- Include Bootstrap JS and Timepicker JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<script>
$(document).ready(function() {
$('#timepicker').timepicker({
format: 'hh:mm A'
});
});
</script>
</body>
</html>
Make sure to include the necessary CSS and JavaScript files for Bootstrap and the Timepicker plugin. The example above uses the CDN links for convenience.
Please note that the Timepicker plugin used in this example is version 0.5.2. You may need to update the version based on your requirements.
I hope this helps!