CODEWITHSUNDEEP
formslaraveldateinput
AM DEV
AM DEV

Reputation: 339

How do I link two input fields of type date?

I have two input fields:
<input name="check_in" type="date" class="checkin"> and
<input name="check_out" type="date" class="checkout"
I want to link them so when i pick a date from check_in field i can only pick the current day or a later day (earlier days disabled). After that I have to choose a day in the check_out field and i can only choose the day chosen in check_in or a later day (Other days have to be disabled)

I have been trying several solutions and code snippets but with no result

Upvotes: 0

Views: 1462

Answers (1)

EddyTheDove
EddyTheDove

Reputation: 13259

If you are using Bootstrap datepicker, then you can assign the start date of check_out to the date on check_in. Something like

$('.checkin').datepicker({
    startDate: 'd' //this means today
});

$('.checkout').datepicker({
    startDate: $('.checkin').val(); //Not sure of this but you get the idea
});

Alternative, just use the daterage option, which has everything implemented already: 

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

And Javascript that goes with 

$('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
});

More here: https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range

This will give you exactly what you need out of the box.

Upvotes: 1

Related Questions