From & to calendars

Hey. I can’t seem to find an example as to how to do this with the new v3 api. Could you please advise?

Here is how it’s done with the jquery ui datepicker:

 $( "#from" ).datepicker({
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});

$( "#to" ).datepicker({
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});

[akash-suthar]

$(‘.datepicker’).on(‘change’, function () { if ($(this).attr(‘id’) === ‘datefrom’) { alert($(this).val()) $(‘#dateto’).pickadate(‘picker’).set(‘min’,$(this).val()); } if ($(this).attr(‘id’) === ‘dateto’) { $(‘#datefrom’).pickadate(‘picker’).set(‘max’,$(this).val()); } });

[dbr0]

An upgrade from what @akash-suthar did:

$('.datepicker').on('change', function () {
//$(document).on('change', '.datepicker', function () { //use this line if you create datepickers dynamically
    if ($(this).data('datepicker_from_or_to') === 'from') {
        $('#'+$(this).data('datepicker_to_target')).pickadate('picker').set('min',$(this).val());
    }
    if ($(this).data('datepicker_from_or_to') === 'to') {
        $('#'+$(this).data('datepicker_from_target')).pickadate('picker').set('max',$(this).val());
    }
});

and in the html

<input type="date"
                       class="datepicker"
                       id="start_date"
                       data-datepicker_from_or_to="from"
                       data-datepicker_to_target="end_date"
                >

and

<input type="date"
                       class="datepicker"
                       id="end_date"
                       data-datepicker_from_or_to="to"
                       data-datepicker_from_target="start_date"
                >