How to create a date picker using the JavaScript library "flatpickr" from jsdelivr

Harry P

Well-known member
Registered
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:

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>
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!
 

Kaz Wolfe

Well-known member
Registered
Joined
Jul 7, 2016
Messages
604
Points
28
Nice share, I really like this because I used jQuery date picker in the past but it is pretty hard and weight when integrated into my form.
 
Latest Threads
Replies
0
Views
4
Replies
1
Views
34
Replies
0
Views
25
Replies
2
Views
85
Replies
0
Views
75
Recommended Threads
Replies
1
Views
1,210
Replies
5
Views
3,810

Latest postsNew threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top