How to disable past dates in calendar in date-picker in javascript/jquery?

Question

I am working on a website in which I want the disable the past dates in calendar.

The HTML and JQuery codes which I have used in order to make the calendar are:

$("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]});
$("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]});

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>

Problem Statement:

I am wondering what changes I should make in the code above so that after selecting the start date, the dates before the start date should get disabled on selecting the end date.

Sphinx · Accepted Answer · 2018-07-26 17:25:59Z

1

You can use the option=beforeShowDay of JQuery UI, then customize the styles for each day like below demo:

As JQuery UI Guide for beforeShowDay:

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date

let startDateUI = $("#startdate_datepicker").datepicker({
  numberOfMonths:[1, 2],
  todayHighlight: true,
  beforeShowDay: function (calDate) {
      return calDate - new Date() < 0 ? [false, '', ''] : [true, '','']
  }
});
$("#enddate_datepicker").datepicker({
  numberOfMonths:[1, 2],
  todayHighlight: true,
  beforeShowDay: function (calDate) {
      let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" )
      return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '','']
  }
});

.disable-day{
  background-color:red;
}

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>

edited Jul 26, 2018 at 17:25

answered Jul 25, 2018 at 17:46

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

flash Over a year ago

@Sphnix I have accepted your answer. I have a quick question. I am wondering how I can disable the hover for the dates which the user can't select in the end date.

Sphinx Over a year ago

@user5447339 try to return [false, '', ''] instead

Sphinx Over a year ago

@user5447339 updated. Added beforeShowDay option for $("#startdate_datepicker")

Sphinx Over a year ago

=. =, it seems your library is different with mine. but one solutoin: return [false, 'disable-day', ''], then refer to this answer to overwrite the hover effect. Tip: Open your browser console, then you will see these classes (ui-datepicker-unselectable ui-state-disabled ) are applied to Dom element of the unavailable days in your website.

Sphinx Over a year ago

I didn't find useful option for the effect you mentioned. but one possible solution is listen hover event for the days, then apply css styles between start date and the hovered date by css selector. You'd better post one new question for better answers.

|

NetByMatt · Accepted Answer · 2018-07-25 17:42:57Z

0

Use .datepicker("option", "minDate", <value of start date>) to set the earliest selectable date. "maxDate" will allow you to set the latest selectable date.

answered Jul 25, 2018 at 17:42

NetByMatt

7174 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to disable past dates in calendar in date-picker in javascript/jquery?

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related