0

I have 2 datepickers on a page. Users are expected to enter 2 dates somewhat close to one another. However, if a user skips 6 months ahead, their intuition tells them that when they click the 2nd datepicker, it will also already be in that same month.

I need to set the defaultDate of the second datepicker, to the date selected in the first datepicker.

$("#from").datepicker({
  defaultDate: new Date(),
  minDate: new Date(),
  onSelect: function(dateStr) 
  {         
      $("#to").val(dateStr);
      $("#to").datepicker("option",{ minDate: new Date(dateStr)})
  }
});

$('#to').datepicker({
  defaultDate: new Date(),
  onSelect: function(dateStr) {
    toDate = new Date(dateStr);
    fromDate = ConvertDateToShortDateString(fromDate);
    toDate = ConvertDateToShortDateString(toDate);
  }
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="from">
<input id="to">

But it fails to run. In fact it fails to initialise the datepickers at all.. And I'm not sure why. Just having them as normal datepickers of course works fine.

Does anyone have any other methods of achieving my goal?

Shiladitya
  • 11,650
  • 15
  • 23
  • 35
Dave Byrne
  • 442
  • 4
  • 20
  • Also... ignore the snippet on here. It doesn't have jQuery 1.12 so cant really be used as a method to test. – Dave Byrne Sep 01 '17 at 12:51
  • Edit: I see you updated your answer. See this fiddle that includes jquery edge and jquery ui and this code works fine. https://jsfiddle.net/gLrumpo3/5/ – luxdvie Sep 01 '17 at 13:02

1 Answers1

0

use the method "show" of jquery ui

    $('#to').datepicker({

        });

$("#from").datepicker({
            defaultDate: new Date(),
            minDate: new Date(),
            onSelect: function(dateStr) 
            {   
                    $("#from").datepicker( "hide" );
                $('#to').val(dateStr);
                $('#to').focus();
                $('#to').datepicker( "show" );
                $("#to").datepicker( "option", "minDate", endDate );
                        //$("#to").datepicker( "option", "maxDate", '+2y' );
            }
        });

the idea it's call to show for work it

i leave a jsfiddle: https://jsfiddle.net/roberburnday/btn7bp2v/

Robert Blasco Villarroya
  • 822
  • 1
  • 10
  • 23