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

Question

Question

Prevent future dates in a Table or Collection

asked on April 2, 2020

I am looking for some help to prevent users entering future dates. I have used some code in a previous post t, but my Date fields are in a Table and also a Collection. The first record it works well, but when I add a row any additional rows do not work for the Date field.

Thanks

Grant

// Prevent Future Dates from being Entered 
$(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 maxDate = (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
    $('.PastCourseDate input').attr('max',maxDate);
 
  });
});

 

0 0

Answer

SELECTED ANSWER
replied on April 3, 2020

Hi Grant,

The additional rows don't work because that will only add the max date to the existing fields, and the new ones don't exist yet so can't be changed. If you add an event listener on the table and collection's Add buttons and recall the function, it should. (Or a change event on the entire table and collection, but this will recall anytime a field is changed.)

// Prevent Future Dates from being Entered 
function setMaxDate() {
  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 maxDate = (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
  $('.PastCourseDate input').attr('max',maxDate);
};

$(document).ready(function() {
  setMaxDate();
});

$(document).on("click", ".cf-table-add-row, .cf-collection-append", function() {
  setMaxDate();
});

 

0 0
replied on April 5, 2020

Thanks very much for your help Jim, this worked perfectly!

1 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.