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

Possible duplicate of [Jquery UI datepicker. Disable array of Dates](http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) — Lelio Faieta, Mar 21 '17 at 14:21
ok `beforeShowDay` for visible day, but how get select date from `start_date` and create array with all date with > select date from `start_date` ? — shuba.ivan, Mar 21 '17 at 14:25
I get start date ` $task_executions_from_date.on('change', function () { var test = $task_executions_from_date.val(); console.log(test); }); ` how to select all date which more test ? — shuba.ivan, Mar 21 '17 at 14:33

score 1 · Accepted Answer · answered Mar 21 '17 at 15:17

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

score 0 · Answer 2 · answered Mar 21 '17 at 15:05

0

You could use a date range picker like this one: http://tamble.github.io/jquery-ui-daterangepicker/

answered Mar 21 '17 at 15:05

Arthur

1,478
3
22
40

I need visible all date which > `task_executions_from_date.val()` – shuba.ivan Mar 21 '17 at 15:17

Jquery datapicker block some date

2 Answers2