jQuery Tutorial

jQuery datepicker with disable date except range

jQuery ui datepicker

Webcontrol is used to select a date from a popup or inline calendar.

jQuery datepicker code to display and disable date ranges

Popup datepicker with disabled date selection before start date and after end date when click on calendar image .

  $( function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date",
      dateFormat: "dd-mm-yy",
beforeShowDay: function (date) {
                var startDate = new Date("2016-02-28"); 
                endDate = new Date("2016-04-12"); 
                return [date>=startDate && date<=endDate];
            }

    }).datepicker("setDate", $('#date_today').text().trim());
});

beforeShowDay

beforeShowDay attribute is used to invoke a function that takes a date as a parameter and must return an array with index 0, 1 and 2.

Array index purposes:

[0]: can be either true or false and indicating whether or not this date is disabled.

[1]: a CSS class name to add to the date's cell or "" for default style.

[2]: popup tooltip for this date.

beforeShowDay: function (date) {
                var startDate = new Date("2016-02-28"); 
                endDate = new Date("2016-04-12"); 
                return [date>=startDate && date<=endDate];
            }

here array [0] disables the date if not in the required range.

jQuery Example Code - To disable date except range and Setting default selected date

Provides option to select the date between start and end date, preventing the date selection except provided date range.

Also highlights the default selected date.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script type = "text/javascript">
   $( function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date",
      dateFormat: "dd-mm-yy",
beforeShowDay: function (date) {
                var startDate = new Date("2016-03-02"); 
                endDate = new Date("2016-03-12"); 
                return [date>=startDate && date<=endDate];
            }

    }).datepicker("setDate", new Date("2016-03-08"));
});

      </script>		
   </head>	
   <body>
   <p>Test Section</p>
<div>
<p>Date: <input type="text" id="datepicker" name="datepicker"></p
</div>
   </body>
</html>

Output: