CODEWITHSUNDEEP
javascriptjquery
karthik
karthik

Reputation: 91

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

$('.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'];
  }
}

Upvotes: 4

Views: 1211

Answers (2)

Cat
Cat

Reputation: 4226

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>

Upvotes: 0

Lain
Lain

Reputation: 3726

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">

Upvotes: 3

Related Questions