Limit the datepicker when it is in a table.

asked on April 8, 2019

I found the following javascript in a previous post and it works for me to limit the date picker to not allow dates prior to the current date.

However, my datepicker is in a table. And this script only works on the first row of the table. How would I adjust it to cover all newly added rows? q9 is the table.

Thanks.

/*Limit the starting date of the date picker.*/
$(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 min date value for the calendar to be today's date
$('#q9 input').attr('min',minDate);

});
});

0 0

SELECTED ANSWER

replied on April 9, 2019 • Show version history

Hi Jennifer,

The following worked for me:

(function() {  
  function formatDate() {
    var d = new Date(),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
  }
  
  function limitDate() {
    $('.date input').attr('min', formatDate());  // Add 'date' class to your date column
  }
   
  
  $(document).ready(function() {
    limitDate();
    $('a#q9').click(function() {  // Change selector to match that on the table's 'Add' link
      limitDate();
    });
  });
})();

Best,

Rob

3 0

View 5 previous replies

replied on April 9, 2019

Thank you. We have a style sheet that every form calls and I suspect it is interfering with this running correctly. I have removed the javascript that I had and copied yours in. I added that date class to the column and changed 'a#q9' to 'a#q8' (my add link) but it is not limiting the date at all. It still allows me to pick dates earlier than the current day.

0 0

replied on April 9, 2019

Are you sure you grabbed the right id? The link and the table itself will have different identifiers. A stylesheet "shouldn't" interfere.

Usually I add a custom class to the table and reference the link with that combined with the class of the add links.

For example,

".myTable .cf-table-add-row"

2 0

replied on April 9, 2019

Did you add the 'date' class to the relevant column in your table? I edited by original post to add that comment to the snippet. I just tested again on my system and it worked, so maybe that's the issue?

1 0

replied on April 9, 2019

I believe I had the right ID. I previewed the page and inspected it. See the shot below in yellow. I tried both a#q8 and a#q8.co-table-add-row.

Yes I added the date class. See the shot below in red. I made sure it was on the column and not on the table itself. I tried .date and date but neither worked. I have not tried adding the custom class to the table as Jason stated.

DatePicker.png (32.3 KB)

| Download

0 0

replied on April 9, 2019

In the CSS class field, just enter 'date', not '.date'. That should fix it!

Also, you got the selector ID right for the 'Add Another Meeting' link.

2 0

replied on April 9, 2019

I should add the information that the style sheet I talked about is a sheet with a style sheet we use to increase 508 compliance and we have had it interfere with tables in the past.

0 0

replied on April 9, 2019

Thanks Rob and Jason. You have both been a big help! I must have been trying too many combinations. I finally got it working.

0 0

replied on April 9, 2019

Glad you got it working! Make sure to mark Rob's post as the answer in case anyone else runs into a similar problem.

1 0

Question

Question

Limit the datepicker when it is in a table.

Answer

Replies

Sign in to reply to this post.