These days we are extensively using a Datepicker (Calendar) in our websites. Because time is very important to everyone. So there are various ways to use a Calendar in websites. The jQuery datepicker is one of the most popular datepicker plug-ins.
This article explains how to use jQuery Date, Date Time, Time picker and more advanced activities on date picker.
  1. Implementing jQuery date picker
  2. Disable future and past dates
  3. Disable specific dates
  4. Highlight specific dates
  5. Display dates for multiple months
  6. Select multiple dates in Calendar
Before starting we need to add js and CSS references to the webpage (.html/.aspx/.cshtml/.jsp/.cfm/.php).
1. jQuery
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
2. jQuery UI JS
  1. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
3. jQuery UI CSS
  1. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
If you need jQueryUI js and css files in your machine then it is available at http://jqueryui.com/download/. But it is recommended to to load JavaScript files from CDN (Content Delivery Network).
Implement jQuery date picker
Once references are properly added, add a textbox to the page.
Note: This textbox will be used in the next activities.
  1. <input type="text" id="datepicker">

Add the following JavaScript code to display a datepicker in a textbox.

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. $("#datepicker").datepicker({
  8. showOn: 'button', // Calendar shows on button
  9. buttonText: 'Show Date', // On hover button it displays text as title
  10. buttonImageOnly: true, // Calendar show only button click
  11. buttonImage: 'calendar.gif', // On click o icon it displays calendar
  12. dateFormat: 'dd/mm/yy', // Set the date format
  13. constrainInput: true // Client can directly modify date in textbox?
  14. });
  15. });
  16. </script>
In the preceding code we use the datepicker() method with a couple of properties to display a Calendar. To understand each property, please find comments in the right side to each property.
Output
Figure 1: Output of jQuery Date Picker
Often we need to display time, like hour, minute, second with a Calendar.
To do this we need to add two more additional plug-in references.
  1. <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
  2. <link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
Complete Code
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  4. <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
  5. <link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. $('#datepicker').datetimepicker({
  10. timeFormat: "hh:mm:ss tt"
  11. });
  12. });
  13. </script>
In the preceding code datetimepicker() is defined in jquery-ui-timepicker-addon.js that displays time with a Calendar. And we injected this method with a textbox (datepicker).
Figure 2: Output of jQuery Date Time Picker
Disable future and past dates
Often we get a requirement to disable future and past dates so that the user can’t select future and past dates. A real-life example to post an article to the C# Corner community and today is the 30th of August. So I should be able to choose the article release date for future dates only. I should not be able to choose a past date as article release date.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. var date = new Date();
  8. var currentMonth = date.getMonth();
  9. var currentDate = date.getDate();
  10. var currentYear = date.getFullYear();
  11. $(".ui-datepicker-today span").addClass("ui-state-hover");
  12. $('#datepicker').datepicker({
  13. minDate: new Date(currentYear, currentMonth, currentDate)
  14. maxDate: new Date(currentYear, currentMonth, currentDate)
  15. });
  16. });
  17. </script>
In the preceding code the jQuery date picker provides two properties, minDate and maxDate, to disable a future date and past date respectively. Figure 3 shows future dates in the Gray color. That means the user can't select those dates.
Figure 3: Output of jQuery Date Picker with disable future date
Disable specific dates in Calendar
Assume there is a requirement to disable specific dates due to some festival or some exceptional holidays. Let’s see how to do it.
In the following example I am disabling the 3rd, 11th, and 20th August of 2015. First we declared an array (disableddates) with all the dates that needs to be disabled. Then add one property beforeShowDay to call a user-defined function to disable a date. In this function we are receiving the current date and checking that it is present in the array. If it is present in the array then return false (to disable it only) otherwise true (to enable only).
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. /** Days to be disabled as an array */
  8. var disableddates = ["8-3-2015", "8-11-2015", "8-20-2015"];
  10. function DisableSpecificDates(date) {
  11. var m = date.getMonth();
  12. var d = date.getDate();
  13. var y = date.getFullYear();
  14. // First convert the date in to the mm-dd-yyyy format
  15. // Take note that we will increment the month count by 1
  16. var currentdate = (m + 1) + '-' + d + '-' + y ;
  17. // We will now check if the date belongs to disableddates array
  18. for (var i = 0; i < disableddates.length; i++) {
  19. // Now check if the current date is in disabled dates array.
  20. if ($.inArray(currentdate, disableddates) != -1 ) {
  21. return [false];
  22. }
  23. }
  24. return [true];
  25. }
  27. $( "#datepicker").datepicker({
  28. beforeShowDay: DisableSpecificDates
  29. });
  30. });
  31. </script>
Figure 4 shows how to disable dates (3rd, 11th, 20th, 25th August 2015) in Gray so that the user can't select those dates.
Figure 4: Output of jQuery Date Picker with disable specific dates
Highlight specific dates
Sometimes we get the requirement to highlight a specific date in a Calendar. The jQuery Date Picker provides a property beforeShowDay that helps us to implement that. And using that property we can implement custom logic and highlight specific dates. For instance the requirement to highlight a company's annual function event.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

  5. <style type="text/css">
  6. .selected {
  7. background: red;
  8. }
  9. .selected a {
  10. background: lime !important;
  11. }
  12. </style>

  14. <script type="text/javascript">
  15. $(document).ready(function(){
  16. // Highlighted date from start date to end date
  17. $("#datepicker").datepicker({
  18. beforeShowDay: function(d) {
  19. var start = new Date(2015, 06, 05); // April 10, 2012
  20. var end = new Date(2015, 06, 07); // April 20, 2012
  21. return [true, start <= d && d <= end ? "selected" : ""];
  22. }
  23. });
  24. });
  25. </script>
In the preceding code we are disabling dates from the 5th August to the 7th August. Here it used the beforeShowDay property to implement custom logic and it is setting up CSS class (selected) based on conditions.
Output
Figure 5: Output of jQuery Date Picker with highlighted dates
Display dates for multiple months
Assume there is a requirement to display multiple months at a time. In other words when I click on text it should show 3 months in the calendar. In a real life example you see in IRCTC, makemytrip site to see multiple at a time. See the following code, there is a property numberOfMonths to display no months in the Calendar.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. $('#datepicker').datepicker({
  8. beforeShowDay: $.datepicker.noWeekends, // For Disable weekends
  9. numberOfMonths: 3
  10. });
  11. });
  12. </script>
Output
Figure 6: Output of jQuery Date Picker with advanced months
Select multiple dates in Date Picker
We can select multiple dates and those dates will display in a textbox as comma separated. In order to implement multiple date selections in a date picker we need to add one more additional plug-in.
  1. <script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"/>
Add the following JavaScript code to display a date picker on focus of textbox. Here the multiDatesPicker() method provides the ability to select multiple dates injected with datePick (the id of the textbox). This method is defined in the jquery-ui.multidatespicker.js file.
Complete Code
  1. <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
  3. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>
  4. <script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"/>
  6. <script type="text/javascript">
  7. $(document).ready(function(}{
  8. $('#datepicker').multiDatesPicker();
  9. });
  10. </script>
Output
Figure 7: Output of jQuery Date Picker with multiple selected date.
Conclusion
jQuery Date Picker is simple to use but very powerful with advanced features.
I hope this article helps you how to implement the jQuery date picker and its advanced features.
Happy Coding!