Full-Stack freelance Umbraco developer in the UK.

George Phillipson - Freelance Umbraco developer

jQuery datepicker update 2nd textbox with following day

<!DOCTYPE html>
<html>
<head>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
</head>
<body>
Arrival <input class="form-control" data-date-format="dd/mm/yyyy" data-date-language="en-GB" data-provide="datepicker" id="ArrivalDate" name="ArrivalDate" type="text" value="08/06/2017"/> 
Depart <input class="form-control" data-date-format="dd/mm/yyyy" data-date-language="en-GB" data-provide="datepicker" id="DepartDate" name="DepartDate" type="text" value="08/06/2017"/>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
    
    <script>
    var date = new Date();
    date.setDate(date.getDate());
    $('#ArrivalDate').datepicker({
        startDate: date,
        clearBtn: true,
        autoclose: true,
        todayHighlight: true,
        forceParse: true
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        var newValue = $(this).val();
        //Pass in new date and format to UK date
        var displayNewDepartDate = dayAfterArrivalDate(toDate(newValue));
        $('#DepartDate').val(displayNewDepartDate);
        $('#DepartDate').datepicker('setStartDate', displayNewDepartDate);
    });
        $("#DepartDate").datepicker({
            autoclose: true
            }).on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#ArrivalDate').datepicker('setEndDate', minDate);
        });
    //Split the date and return as javascript default date
    function toDate(dateStr) {
        var parts = dateStr.split("/");
        return new Date(parts[2], parts[1] - 1, parts[0]);
    }
    function dayAfterArrivalDate(d) {
        var dayAfterArrival = new Date(d);
        dayAfterArrival.setDate(dayAfterArrival.getDate() + 1);
        var displayDate     = dayAfterArrival.getDate().toString();
        //Pad with leading 0 if only 1 char long
        displayDate         = displayDate.length > 1 ? displayDate : '0' + displayDate;
        var displayMonth    = (dayAfterArrival.getMonth() + 1);
        //Pad with leading 0 if only 1 char long
        displayMonth        = displayMonth.length > 1 ? displayMonth : '0' + displayMonth;
        var displayYear     = dayAfterArrival.getFullYear();
        var displayDayAfterArrival = displayDate + '/' + displayMonth + '/' + displayYear;
        return displayDayAfterArrival;
    }
    </script>
</body>
</html>
jQuery Calander

Please enter your comment.