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



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.



0 0


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.

2 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
replied on February 26, 2020

This is really helpful! How does the javascript change if I am using a M/dd/yyyy format?

1 0
replied on May 7, 2020 Show version history

Hi Alex; like Melissa this is helpful, thanks!

However could we please see the JS for Melissa's M/dd/yyyy format, and also for the one I need which is dd/MM/yyyy?

Cheers :)


Actually to expand on my requirement; I actually want to achieve the following:

  1. Date 1 (.departDate) can't be before today's date
  2. Date 2 (.returnDate) can't be before Date 1


I'm using the following code on Date 1 field; and this works well:

$(function() {
  $(document).ready(function () {
   var todaysDate = new Date(); // Gets today's date
    // Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
    var year = todaysDate.getFullYear(); 						// YYYY
    var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);	// MM
    var day = ("0" + todaysDate.getDate()).slice(-2);			// DD

   	var minDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
    // Now to set the max date value for the calendar to be today's date
    $('.departDate input').attr('min',minDate);


Fields are:


Date format for both fields is dd/MM/yyyy.


Any help with the required code would be fantastic, thanks!

0 0


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.