How to disable last 3 days of every month using jQuery datepicker

Question

$('.scheduledate').change(function() {
    selectedDate = $(this).datepicker('getDate');
})

function checkDate(selectedDate) {  
   var today = new Date();
   var d = selectedDate.getDate();  
   var dd = today.getDate();
   if(d == dd || d == dd+1 || d == dd+1 || d == dd+1 || d==29 || d== 30 || d==31){
    return [false,'na_dates','Close date F'];
    }else{
   return [true,'   ','Open date T'];
  }
}

It is usually easier to set the date to the first day of the next month and reduce three days of that, instead of comparing to specific numbers. So one does not get messed up with the amount of days in specific months (28/29/30/31). How to disable you will find plenty on SO. https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates — Lain, Jun 26 '20 at 05:48

Lain · Answer 1 · 2020-06-26T07:10:59.343

This is a copy of AlwaysHelpings answer, yet with a different approach of disabling the last three days of a month.

var dateToday = new Date(); 

$("#datepicker").datepicker({
  beforeShowDay: noLastThreeDays,
  minDate: dateToday
});

function noLastThreeDays(date){
   //REM: Last day of month
  var tLastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  
  //REM: Date of the passed date
  var tDate = date.getDate();

  //REM: Lock the last three days of the month
  if(
    tDate === tLastDayOfMonth.getDate() ||
    tDate === tLastDayOfMonth.getDate()-1 ||
    tDate === tLastDayOfMonth.getDate()-2
  ){
    return [false, "closed", "Sorry We are closed"]
  }
  else{
   return [true, "", ""]
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

<input type="text" id="datepicker" placeholder="Last three days disabled">

and one more condition is I need to disable the past dates from current date — karthik, Jun 26 '20 at 06:48
You can use the `minDate` option for that. https://stackoverflow.com/questions/8356358/jquery-date-picker-disable-past-dates — Lain, Jun 26 '20 at 07:11

Cat · Answer 2 · 2020-06-26T08:47:50.130

This solution (also derived from AlwaysHelping's deleted answer) determines the last day of the current month manually, and compares it to the current date.

To add further customizations to the datepicker object, add them as key/value pairs after beforeShowDay: noLastThreeDays (eg: to hide all past days, use minDate: 0 as shown.)

Check out the datepicker documentation for more info.

$("#datepicker").datepicker({
  beforeShowDay: noLastThreeDays,
  //minDate: 0
});

function noLastThreeDays(date){

  const
    dd = date.getDate(),
    mo = date.getMonth(),
    yr = date.getFullYear(),
    thirtyDayMonths = [3,5,8,10], // Apr, Jun, Sep, Nov        
    isLeapYear = (yr) =>
      (yr % 100 === 0) ? (yr % 400 === 0) : (yr % 4 === 0);

  // Last date of month
  let last = 31;
  if(thirtyDayMonths.includes(mo)){ last = 30; }
  if(mo === 1){ last = isLeapYear(yr) ? 29 : 28; }
  
  // Output to datepicker
  const result = (dd <= last - 3)
    ? [true, "", ""]
    : [false, "closed", "Sorry We are closed"];
  return result;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

<label>Choose date:
  <input id="datepicker" />
</label>

How to disable last 3 days of every month using jQuery datepicker

2 Answers2