Question

在Bootstrap datepicker中如何禁用预览中的所有日期到结束日期的开始日期？在简单的theres 2 datepicker输入中，当第一个输入获得日期时，第二个输入日期仅限于第一个输入日期之后的日期。感谢

Answer 1

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

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

1 个答案: