Jquery datapicker block some date

Question

I have to field start date and end date. How to make in end date, user can select date only more from start day, like in screen

this my js where I call data picker for my input

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

what need put in beforeShowDay for task_executions_to_date.datepicker ? like all days which > test

Now I have all date disabled, why not understand

Answer 1

Have a look to 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">