简体   繁体   中英

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

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

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM