0

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
  • 10,519
  • 2
  • 27
  • 45
flash
  • 1,455
  • 11
  • 61
  • 132

2 Answers2

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>
Sphinx
  • 10,519
  • 2
  • 27
  • 45
  • @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`. – flash Jul 26 '18 at 16:59
  • @user5447339 try to return `[false, '', '']` instead – Sphinx Jul 26 '18 at 17:11
  • in your code, users can still select past dates in the calendar in start date like the dates before 26th July. – flash Jul 26 '18 at 17:19
  • for startdate calendar, you want to disable past dates? if so, add `beforeShowDay` option for `$("#startdate_datepicker")`, then compare with `new Date()` – Sphinx Jul 26 '18 at 17:22
  • can you change in the code? I may end up doing wrong. – flash Jul 26 '18 at 17:24
  • 1
    @user5447339 updated. Added `beforeShowDay` option for `$("#startdate_datepicker")` – Sphinx Jul 26 '18 at 17:26
  • Thanks. It worked. I just pushed your code in my [domain](http://ferhan.ferohost.com/). The hover seems to be still in effect for the dates which user can't select in the **end date section**. – flash Jul 26 '18 at 17:32
  • 1
    =. =, it seems your library is different with mine. but one solutoin: return `[false, 'disable-day', '']`, then refer to [this answer](https://stackoverflow.com/questions/7035407/how-to-override-css-hover) 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 Jul 26 '18 at 17:37
  • I used your library and it worked now. Refresh my domain. I have one last question. Stay tuned. Thanks for your help. – flash Jul 26 '18 at 17:40
  • First of all thanks for your help. I was just thinking if I select the start date like **26th July** and if I try to select any date from the end date then hover effect comes in place in between them like in airbnb. Is there any way we can do that ? – flash Jul 26 '18 at 17:52
  • 1
    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. – Sphinx Jul 26 '18 at 18:07
  • I will post new on SO and will keep you posted. – flash Jul 26 '18 at 18:19
  • I have posted new [question](https://stackoverflow.com/questions/51545468/hover-effect-in-between-the-selected-start-date-and-end-date-in-css) using your code. Not sure if I have use the right wording. – flash Jul 26 '18 at 19:35
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.

NetByMatt
  • 703
  • 4
  • 13