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

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.

3 0

View 1 previous reply

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:

Date 1 (.departDate) can't be before today's date
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

replied on May 23, 2023

Hello help me please , I replicate the same example for my form but I put the ID's of the Fields date and it's not function , the date box disappears and select nothing

$(document).ready(function () {
  $('#q5').on('change', function() { 
    var datearray = $('#q5 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);
    $('#q6 input').attr('min',minDate); 
  });
});

Question

Question

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

Answer

Replies

Sign in to reply to this post.