How to link two datepicker so that the begin date on the first datepicker is the minimum date on the second datepicker?

Question

I am using UIKit web framework (getuikit.com)

Is there any way I can use two datepickers so that the selected begin date in the first would match the minimum date allowed on the second datepicker? (essentially to make it work like hotel/flight booking)

Here is what I've tried in JQuery:

$("#startDate").blur(function() {
  var init = $("#startDate").val();
$("#endDate").attr("data-uk-datepicker","format:'DD/MM/YYYY', minDate:"+init+", maxDate:10");
  UIkit.datepicker("#endDate");
});

Answer 1

First you should use the hide.uk.datepicker event instead of jQuery's blur.

Note that maxDate:10 only gives you the offset in days from current date.

Then you could do something like this:

HTML:

<form class="uk-form">
        <input type="" id="startDate" data-uk-datepicker="{format:'DD/MM/YYYY'}">
        <input type="" id="endDate">
    </form>

JS:

jQuery(document).ready(function() 
{
    jQuery("#startDate").on("hide.uk.datepicker", function (event) 
    {
        var init = jQuery(this).val();
        var dateArray = init.split("/");

        var day = parseFloat(dateArray[0]);
        var month = parseFloat(dateArray[1]);
        var year = parseFloat(dateArray[2]);

        var newDate = new Date(Date.UTC(year,month - 1,day));

        //add 10 days
        newDate.setDate(newDate.getDate() + 10);

        var newDay = newDate.getDate();
        var newMonth = newDate.getMonth() + 1;
        var newYear = newDate.getFullYear();

        var formatedDate = newDay + "." + newMonth + "." + newYear;

        UIkit.datepicker("#endDate", {format:"DD/MM/YYYY", minDate:init, maxDate:formatedDate});
    });
});

CSS:

.uk-datepicker-date-disabled
{
    color: gray;
}

It should look like this: