Jquery datepicker阻止一些日期

Question

我必须填写开始日期和结束日期。如何设置结束日期，用户只能从开始日期开始选择日期，就像在屏幕中一样

这是我的 js，我在其中为我的输入调用数据选择器

$(document).ready(function () { var $task_executions_from_date = $('#task_executions_from_date');

$task_executions_from_date.datepicker({
    dateFormat: 'dd.mm.yy'
});

$task_executions_from_date.on('change', function () {
    var test = $task_executions_from_date.val();
    console.log(test);
});

var $task_executions_to_date = $('#task_executions_to_date');

$task_executions_to_date.datepicker({
    dateFormat: 'dd.mm.yy',
    beforeShowDay: function(date){
        var arrayDate = $task_executions_from_date.val().split('.');
        var start_date = new Date(arrayDate[2], arrayDate[1]-1, arrayDate[0]).getTime();
        if (start_date) {
            return date.getTime() > start_date;  
        }

        return true;
    }
});

beforeShowDay 需要为 task_executions_to_date.datepicker 输入什么？就像所有的日子which > test

现在我把所有日期都禁用了，为什么不明白

Answer 1

看看https://jqueryui.com/resources/demos/datepicker/date-range.html。

$(document).ready( 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;
  }
} );

body {
  font-family: Arial, Helvetica, sans-serif;
}

table {
  font-size: 1em;
}

.ui-draggable, .ui-droppable {
  background-position: top;
}

<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

Answer 2

您可以使用像这样的日期范围选择器：http://tamble.github.io/jquery-ui-daterangepicker/