Post
Ask Question

More on jQuery Datepicker

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" />    
  4.   
  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">  
  6.   
  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" />  
  4.   
  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" />  
  4.   
  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"];  
  9.       
  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.     }  
  26.       
  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"/>
  5.   
  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!


Similar Articles