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

Question

Question

How to restrict date picker selection based on the entry in another date field?

asked on October 25, 2016

Hi guys,

I know how to set the date picker to only make selection available for dates greater than today's date (using JavaScript "min" date attribute), but what if I have two date fields and I want to set the second date picker to only make selection available for dates including/after the date selected in the first date field?  The requirement is also to be able to use dates in the format "dd-MMM-yy".

For example, in the first date field, the user selects 26-Nov-16.  Then, when they click on the date picker for the second date field, the earliest date they are able to select is 26 Nov.

I'm using Forms 10.1.

Thanks,

Mike

0 0

Answer

SELECTED ANSWER
replied on October 25, 2016

Here's a working example

$(document).ready(function () {
  $('.firstdate input').on('change', function() { 
    var datearray = $('.firstdate input').val().split("-");
    var montharray = ["Jan", "Feb", "Mar","Apr", "May", "Jun","Jul", "Aug", "Sep","Oct", "Nov", "Dec"];
    var year = "20" + datearray[2];
    var month = montharray.indexOf(datearray[1])+1;
    var day = datearray[0];
    var minDate = (year +"-"+ month +"-"+ day);
    $('.seconddate input').attr('min',minDate); 
  });
});

The form has two date fields that uses the following CSS class names respectively: firstdate and seconddate. The fields are also using the dd-MMM-yy date format. After picking a date in the first date field, the date picker in the second date field should be restricted such that the minimum date that can be selected is the first date.

1 0
replied on October 25, 2016

Thanks very much Alexander, it works perfectly and I was nowhere near coming up with something like that so it's much appreciated.

0 0

Replies

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

Sign in to reply to this post.