JQuery datepicker based on another datepickers value

Question

I have a text box with a datepicker on my page. Initially, there is only one, but there can be more added dynamically. The first datepicker is set up so that the user cannot choose a date before today, but can choose any date in the future.

How can I set up the next datepickers so that the user cannot choose a date before the date chosen in the previous date pickers? For example: If today is 25.02.2019 and I choose 01.03.2019 in the first datepicker, then the second date picker shouldn't be able to choose anything before 01.03.2019.

If I select 10.03.2019 in the second datepicker, then the next generated datepicker shouldn't be able to choose anything before 10.03.2019.

Heres what I have so far:

$(".flightDate").datepicker({ minDate: 0 });

$('body').on('focus',
    '.dynamic-flightdate',
    function () {
        $(this).datepicker({
            numberOfMonths: 1,
            firstDay: 1,
            defaultDate: 0,
            minDate: function () {
                $(this).prev(".datepicker").val();
                console.log($(this).prev(".datepicker").val());
            },
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd.mm.yy'
        });
        $(this).datepicker('show');
    });

but it does not bring back any value in the console.log call

Add more code. You must set the new range within the event of the first DatePicker, check here: https://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-issue — Baro, Feb 25 '19 at 10:32
@Baro More content aded! I do not see how the given sample does work for me? — JonSnow, Feb 25 '19 at 11:56

score 0 · Answer 1 · answered Feb 26 '19 at 08:32

If I understood your goal, this is the working example of how I intended to use the onSelect event.

Hope this help you

$(".flightDate").datepicker({
  minDate: 0,
  onSelect: function() {
    $(".dynamic-flightdate").datepicker("option", "disabled", false);
    $(".dynamic-flightdate").datepicker("option","minDate", $(this).datepicker("getDate"))
  }

});


$(".dynamic-flightdate").datepicker({ minDate: 0, disabled: true });


/*
$('body').on('focus',
  '.dynamic-flightdate',
  function() {
    $(this).datepicker({
      numberOfMonths: 1,
      firstDay: 1,
      defaultDate: 0,
      minDate: function() {
        $(this).prev(".datepicker").val();
        console.log($(this).prev(".datepicker").val());
      },
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd.mm.yy'
    });
    $(this).datepicker('show');
  });*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<input type="text" class="flightDate" />
<input type="text" class="dynamic-flightdate" />

JQuery datepicker based on another datepickers value

1 Answers1