Harry P
Well-known member
- Joined
- Feb 3, 2015
- Messages
- 447
- Points
- 28
I have just created a date picker for my form on my website, I like to share here for us to use if need. Here is a complete file that demonstrates how to create a date picker using the JavaScript library "flatpickr" from jsdelivr:
In this example, we include the CSS file for flatpickr from the jsdelivr CDN and the JavaScript file for flatpickr. The flatpickr function is then called on an input element with the id "date-picker". The options passed to flatpickr include enableTime: false to disable time selection and dateFormat: "Y-m-d" to set the date format to YYYY-MM-DD.
Hope it helps!
Code:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<style>
.input-group {
width: 50%;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="input-group">
<input type="text" id="datepicker">
</div>
<script>
flatpickr("#datepicker", {
enableTime: false,
dateFormat: "Y-m-d",
minDate: "2020-01-01",
maxDate: "2023-12-31"
});
</script>
</body>
</html>Hope it helps!
