You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Restrict Date Picker so that End Date field Cannot be before Start Date Field

posted on August 9, 2022

Hi There!

I know there is someone out there that knows JavaScript way better than I do and I think this should be fairly easy.  I have two date fields, "Start Date" and "End Date".  How do I restrict the end date so that it cannot be before the start date?  I've seen similar posts on here but they are are looking for something a bit more complicated than I am looking for.  

Thanks in advance!

Drew

0 0
replied on August 9, 2022

There's a couple ways you could do this.

The easiest way is to use JavaScript to update the min date attribute each time the Start Date changes.

In the following the class startDate is added to the Start Date field and the class endDate is added to the End Date field and it updates the allowed range whenever Start Date changes.

$(document).ready(function(){
  $('.startDate input').on('change', function(){
    // use start date value or blank if start date is not set
    // adjust the MM/DD/YYYY portion if you're using different formatting in your field
    // the YYYY-MM-DD needs to stay the same because that's how the min/max are set
    var minDate = $(this).val() != '' ? moment($(this).val(),'MM/DD/YYYY').format('YYYY-MM-DD') : '';
    
    // set min date and revalidate field
    $('.endDate input').attr('min', minDate).parsley().validate();
  });
});

If you don't want to let them be equal, then you'd need a little more.

2 0
replied on August 9, 2022

Jason you're a genius!  This is EXACTLY what I looking for.  Thanks so much for your help!

 

Drew

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.