代码之家 › 专栏 › 技术社区 › flash

如何在javascript/jquery的日期选择器中禁用日历中的过去日期?

calendar datepicker html jquery javascript

flash · 技术社区 · 6 年前

我在做一个 website 其中我要禁用日历中的过去日期。

这个 HTML格式 和 JQuery公司 我用来制作日历的代码是:

$("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]});
$("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]});

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>

问题陈述:

我想知道我应该在上面的代码中做些什么更改 因此,在选择开始日期之后,在选择结束日期时应该禁用开始日期之前的日期 .

2 回复 | 直到 6 年前

Sphinx 6 年前

你可以用 the option=beforeShowDay of JQuery UI ,然后自定义每天的样式,如下演示:

作为JQuery UI指南 展览日前 :

以日期为参数且必须返回数组的函数使用:

[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date

let startDateUI = $("#startdate_datepicker").datepicker({
  numberOfMonths:[1, 2],
  todayHighlight: true,
  beforeShowDay: function (calDate) {
      return calDate - new Date() < 0 ? [false, '', ''] : [true, '','']
  }
});
$("#enddate_datepicker").datepicker({
  numberOfMonths:[1, 2],
  todayHighlight: true,
  beforeShowDay: function (calDate) {
      let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" )
      return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '','']
  }
});

.disable-day{
  background-color:red;
}

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>

NetByMatt 6 年前

使用 .datepicker("option", "minDate", <value of start date>) 设置可选择的最早日期。”maxDate”将允许您设置最新的可选日期。