当“开始日期”选择“日期”时，“结束日期”禁用“开始日期”之前的所有日期

When Start date selects date End date disables all days before start date

本文关键字：日期 开始 开始日期 禁用 选择 结束 结束日期      更新时间：2023-09-26

在Bootstrap日期选择器中如何禁用从预览到结束日期的所有日期?简单来说，当第一次输入获得日期时，有2个日期拾取器输入，第二个输入日期仅限于第一次输入日期之后的日期。由于

minDate必须是另一个日期选择器的maxDate:

datepicker.on( "change", function() {
      to.datepicker( "option", "minDate", getDate( this ) );
    })

您可以将此解决方案应用于任何Jquery日期显示器:

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

相关文章：