Are you looking to add a DateTime picker on your website? Adding a DateTime picker helps your users to choose the date and time together. This feature is useful when your application requires both date and time from the users. Maybe you are running some events and need to store the arrival time of the visitors. Another example is, you’re running an online store and want to know when the user will pick up the order.

Having said that, in this article, we study how one can add a DateTime picker on their website.

To achieve this goal, I am going to cover 2 packages that allow us to integrate a DateTime picker.

• flatpickr: A lightweight and powerful DateTime picker.
• jQuery Timepicker Addon: If you want to add a time picker with jQuery UI Datepicker then use this package.

I’ll write the code using both packages. You can pick any of them which is suitable for your project.

I’d recommend if this is the first time you’re going to add DateTime picker then choose flatpickr. And if you’re already using a jQuery Datepicker then go for a Timepicker addon.

DateTime Picker using flatpickr

The flatpickr is one of the most popular libraries. It adds a DateTime picker without any dependencies. It does not require any external libraries like jQuery, Bootstrap, etc. All you need to do is include JavaScript and CSS files of the flatpickr package, pass the configuration on the selector and you are done.

You can use the following code to add a DateTime picker with the help of flatpickr.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />

<input type="text" name="datetime" id="datetime" placeholder="Choose Date and Time" />

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
});
</script>

This code will give you an output something like the below screenshot.

Isn’t it easy? You can achieve even more with the flatpickr. Following their documentation, you will get tons of configuration options. Some of the features are:

• Preloading a Date
• minDate and maxDate
• Disabling dates
• Selecting multiple dates
• and much more…

jQuery Timepicker Addon

Before I came to know about flatpickr, I was using jQuery Timepicker Addon for my projects. The developer of this addon recently stopped updating a library. But this package is still working without any issues.

This Addon adds a time picker to the jQuery UI Datepicker. After integrating this addon, your jQuery UI Datepicker will look like the below screenshot.

In order to add this time picker you have to follow the below steps.

• Include CSS and JS files of the jQuery UI Datepicker
• Include CSS and JS files of the time picker addon
• Call the datetimepicker() method on the selector

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />

<input type="text" id="datepicker" placeholder="Choose Date and Time" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<script>
jQuery(function($) {
    $("#datepicker").datetimepicker();
});
</script>

In the above code, I called datetimepicker() method on the selector #datepicker which is an id for the input. Now go ahead and give it a try. You will see the option for both the date and time. To select the time, you need to slide through Hour and Minute.

I have shown 2 packages that add a DateTime picker on your website. You can use any one of them and easily integrate a DateTime picker that allows users to choose a date and time. Personally, I’d recommend flatpickr. It’s lightweight and maintained actively.

Related Articles

• Drag and Drop Multiple File Upload Using JavaScript and PHP
• SweetAlert – A Beautiful Replacement For JavaScript Dialog Boxes
• Deploy Static Website on Firebase Hosting for Free

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.