【问题标题】:How to disable last 3 days of every month using jQuery datepicker如何使用 jQuery datepicker 禁用每个月的最后 3 天
【发布时间】: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 上找到很多。 stackoverflow.com/questions/15400775/…
  • 查看下面的工作答案。

标签: javascript jquery


【解决方案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 选项。 stackoverflow.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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-04-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多