CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Ari
Ari

Reputation: 6189

setting min attribute of date picker from value of another date picker

I am trying to recreate a Depart and Return type date picker for a mock travel company.

<input type="date" id='depart_date' name="depart_date">

<input type="date" id='return_date' name="return_date" disabled>

When the depart date is clicked, it removes the disabled attribute from the return date picker. I also have some jquery/js that sets the min value of the departure date picker as todays date.

What I want to do is, after the user has picked a departure date, I want to set that date as the min value for the return date, because obviously your return date cannot be before your departure date.

What I have tried:

 $('#depart_date').click(function(){
    var departDate = $('#depart_date').val();
    $('#return_date').prop("disabled", false);
    $("#return_date").setAttribute("min", departDate);
 });

but it throws errors as soon as I click the picker, before even choosing a date.

Upvotes: 2

Views: 733

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You just need the jquery attr method http://api.jquery.com/attr/

Also you could use the DOM element method $("#return_date")[0].setAttribute, but this will only work for one element, while the jquery method will be applied to all elements that match the selector.

 $('#depart_date').change(function(){
    var departDate = $('#depart_date').val();
    $('#return_date').prop("disabled", false);
    $("#return_date").attr("min", departDate);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id='depart_date' name="depart_date">
<input type="date" id='return_date' name="return_date" disabled>

Upvotes: 2

Related Questions