Hello, developers! Today, let's explore the world of time selection and learn how to integrate a sleek Time Picker into our web applications using Flatpickr.
Flatpickr, known for its simplicity and flexibility, is an excellent choice for adding date and time-picking functionalities.
In this guide, I'll walk you through the process step by step, keeping it straightforward with CDN (Content Delivery Network) files.
In this article, I'll give you examples of timer pickers, time picker with AM/PM, 24-hour time picker, and preloading time. Also, you can use it in laravel 8, laravel 9, laravel 10 and PHP.
So, let's see how to add a flatpickr time picker example, time picker, flatpickr time format, flatpickr 24 hour time, time picker cdn, time picker with am pm, jquery time picker with am pm.
Step 1: Setting Up Flatpickr
First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:
<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Step 2: Create an HTML Input Element
Add an input field to your HTML file with a class that you'll use for initializing Flatpickr:
<input type="text" class="time-picker" placeholder="Select Time">
Example:
Create an HTML file (e.g., index.html) and include the necessary CDN links for Flatpickr:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flatpickr Time Picker Example - Techsolutionstuff</title>
<!-- Flatpickr CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.css">
<!-- Flatpickr JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.js"></script>
</head>
<body>
<input type="text" class="time-picker" placeholder="Select Time">
<script>
// Initialize Flatpickr with Time Picker
flatpickr('.time-picker', {
enableTime: true,
noCalendar: true,
dateFormat: 'H:i',
});
</script>
</body>
</html>
24-hour Time Picker
<script>
// Initialize Flatpickr with Time Picker
flatpickr('.time-picker', {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
});
</script>
Time Picker w/ Limits
<script>
// Initialize Flatpickr with Time Picker
flatpickr('.time-picker', {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minTime: "14:00",
maxTime: "20:30",
});
</script>
Preloading Time
<script>
// Initialize Flatpickr with Time Picker
flatpickr('.time-picker', {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "15:30"
});
</script>
You might also like:
Top comments (0)