如何使用 jQuery datepicker 禁用每个月的最后 3 天

Posted 2023-05-07

【中文标题】如何使用 jQuery datepicker 禁用每个月的最后 3 天

【英文标题】：How to disable last 3 days of every month using jQuery datepicker

【发布时间】：2020-10-16 16:42:49

【问题描述】：

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

【问题讨论】：

通常更容易将日期设置为下个月的第一天并减少三天，而不是与特定数字进行比较。因此，人们不会弄乱特定月份（28/29/30/31）的天数。如何禁用你会在 SO 上找到很多。 ***.com/questions/15400775/…

查看下面的工作答案。

【参考方案1】：

这是 AlwaysHelpings 答案的副本，但采用了不同的方法来禁用一个月的最后三天。

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

【讨论】：

不，没关系。至少我学到了一些新东西。谢谢:)

还有一个条件是我需要从当前日期禁用过去的日期

您可以使用minDate 选项。 ***.com/questions/8356358/…

【参考方案2】：

此解决方案（也源自 AlwaysHelping 的已删除答案）手动确定当月的最后一天，并将其与当前日期进行比较。

要向 datepicker 对象添加进一步的自定义，请将它们作为键/值对添加到 beforeShowDay: noLastThreeDays 之后（例如：要隐藏所有过去的日子，请使用 minDate: 0，如图所示。）

查看datepicker documentation 了解更多信息。

$("#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>