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

Question

Question

Limit date picker on a form to a specific number of days

asked on December 22, 2023

I have a form with two date fields... let's call them StartDate and EndDate.  I want to make it so that once a user selects a StartDate, the EndDate field limits them to selecting a date no more than 15 days beyond the StartDate. 

 

I'm assuming this is possible with CSS or JavaScript on the form.  Can anybody help me with the syntax?

 

Thanks!

Mike

0 0

Replies

replied on December 28, 2023 Show version history

Look in Field Rules and select Validate in the first dropdown. That's where you can set variable options in v11 Update 4+, and it looks like Cloud has it as well. You'll probably have to create a hidden field to calculate Start + 15 to use as your variable.

And now I see your comment about the form needing to be in Classic, so that might not work. However, I did use JavaScript when I built a form in Classic prior to upgrading it to Modern. I deleted that form, but I found the starting code here.

2 0
replied on December 26, 2023

Hi Mike, 

Try this...this will format the second datepicker to only allow day selections 15 days in advance after the first is selected. This is on cloud with the classic designer. 

*I used 16 days because when you select a day it's actually the day before at 19:00 GMT. 

If you have an obedient user, they will click the first date picker then the second. However, if the user clicks the first date picker then the second date picker and they realize the didn't like the date on the first date picker and picks a new date, the second date picker doesn't 'reset'. I added a button for that to clear it and reset (just to test). It all depends on your use case and how critical it is to ensure the 15 days.  

In the code below, q1/calendarDate is the first date picker, q2/myEndDate is the second date picker, q4 is a custom button to reset q2/myEndDate (the second date picker).

$(document).ready(function() {

  $('#q4').on("click", function() {
    $('#q2 input').val('');
    $('.myEndDate input').datepicker("option", {
      minDate: null,
      maxDate: null
    });
    //alert( "Handler for `click` called." );
  });


  $('.calendarDate input').change(function() {

    //required :: be sure to add the calendarDate class to the first date field
    //required :: be sure to add the myEndDate class to the second date field
    //optional :: you may want to consider disabling or hiding the second date field until
    //			  the first date field is selected

    //number of days in advance to set the second date picker
    var daysInAdvance = 16

    //grab the selected date from the first date field
    var dt = new Date($(this).val());
    //alert(dt);

    //create a var for the new date and add days to it
    var startDate = new Date();
    startDate.setDate(dt.getDate() + daysInAdvance);

    //set the minDate attr of the second date field(
    var minDate = $.datepicker.formatDate('yy-mm-dd', new Date(startDate));
    //alert(minDate);
    $('.myEndDate input').attr('min', minDate);

  })

});
1 0
replied on December 26, 2023

Anthony, I'm not sure that JavaScript will work in Laserfiche Cloud.

1 0
replied on December 27, 2023

Thanks, Blake. I am open to missing some gothcha's but I created and tested this on Cloud; the form *must* be created with the 'classic' designer. 

 

0 0
replied on December 27, 2023

Sorry Anthony, I should have mentioned that I was referring to the new designer.

0 0
replied on December 28, 2023

Look in Field Rules and select Validate in the first section. That's where you can set variable options in v11 Update 4+, and it looks like Cloud has it as well. You'll probably have to create a hidden field to calculate Start + 15 to use as your variable.

You are not allowed to follow up in this post.

Sign in to reply to this post.