How to Implement jQuery Datepicker with Timepicker

Are you looking to add a datetime picker to your application? By adding a timepicker with the dates, your users can choose the date and time together. This feature is useful when your application requires storing both date and time. Maybe you are running some events and need to store the arrival time of the visitors.

In this article, we study how one can add a datetime picker on their website.

To achieve the goal, I am going to cover 2 packages that allow us to add a datetime picker.

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

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

Datetime Picker using flatpickr

The flatpickr is the most popular library. 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.

flatpickr-datetimepicker

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">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

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

<script>
flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
});
</script>

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 flatpickr provide:

  • Preloading a Date
  • minDate and maxDate
  • Disabling dates
  • Selecting multiple dates

jQuery Timepicker Addon

Before I came to know about flatpickr, I was using jQuery Timepicker Addon for my projects. The developer of this package recently stopped updating a library. But with the current state of a library, it’s still working without any issues.

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

jQuery-Datetimepicker

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

  • Include jQuery UI Datepicker script and style
  • Include CSS and JS files of timepicker addon
  • Call the datetimepicker() method on the selector
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/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.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/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 date and time. To select the time, you need to slide through Hour and Minute.

Conclusion

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

Related Articles

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

7 thoughts on “How to Implement jQuery Datepicker with Timepicker

  1. Not bad, but how can I format it so it doesn’t display the Second, Millisecond, and Mircosecond options?

      1. I know, and that’s what I want mine to do, but by default it also shows seconds, milliseconds, and microseconds. How do I stop it from showing those?

Leave a Reply

Your email address will not be published.