Page 1 of 1

Setting Start and End Dates

Posted: Sun Sep 24, 2017 7:49 am
by ic57369k
Hello,
I have a dynaform where I am choosing start and end dates from the calender. I want to impose following validation rules
1. Start date should be atleast today. Cant be before current date.
2. End date cant be earlier than start date.
3. End Date cant be more than 60 days ahead than start date.
Need a suitable java script.
Thanks and regards

Re: Setting Start and End Dates

Posted: Tue Sep 26, 2017 1:03 am
by amosbatto
I don't have time right now to work on this, but you should see this post to get started and look at the documentation for moment.js.
viewtopic.php?f=41&t=713762&p=795579#p795579

Re: Setting Start and End Dates

Posted: Tue Sep 26, 2017 11:04 pm
by amosbatto
I had some time to play with this.
First, create a DynaForm which has two datetime fields whose IDs and variables are named "startDate" and "endDate". In each of these field, set their "min date" properties to be: @@minDate
Set these two datetime fields to be required.

Second, add the following JavaScript to the DynaForm:
Code: Select all
getFormById( $("form").prop("id") ).setOnSubmit( function() {
  var startDate = moment( $("#startDate").getValue() );
  var endDate   = moment( $("#endDate").getValue() );
  var diff = endDate.diff(startDate, 'days');
  
  if (diff < 0) {
    alert("The End Date must be after the Start Date.");
    return false;
  }
  else if (diff > 60) {
    alert("The End Date must not be more than 60 days after the Start Date.");
    return false;
  }
});
Third, create a trigger in the process with the following code:
Code: Select all
@@minDate = date('Y-m-d'); 
Set this trigger to fire before the DynaForm.

Here is a sample process to test it:
(36.49 KiB) Downloaded 296 times

Re: Setting Start and End Dates

Posted: Tue Sep 26, 2017 11:05 pm
by amosbatto
I had some time to play with this.
First, create a DynaForm which has two datetime fields whose IDs and variables are named "startDate" and "endDate". In each of these field, set their "min date" properties to be: @@minDate
Set these two datetime fields to be required.

Second, add the following JavaScript to the DynaForm:
Code: Select all
getFormById( $("form").prop("id") ).setOnSubmit( function() {
  var startDate = moment( $("#startDate").getValue() );
  var endDate   = moment( $("#endDate").getValue() );
  var diff = endDate.diff(startDate, 'days');
  
  if (diff < 0) {
    alert("The End Date must be after the Start Date.");
    return false;
  }
  else if (diff > 60) {
    alert("The End Date must not be more than 60 days after the Start Date.");
    return false;
  }
});
Third, create a trigger in the process with the following code:
Code: Select all
@@minDate = date('Y-m-d'); 
Set this trigger to fire before the DynaForm.

Here is a sample process to test it:
(36.49 KiB) Downloaded 248 times

Re: Setting Start and End Dates

Posted: Fri Sep 29, 2017 7:30 am
by ic57369k
Extremely grateful. thanks and regards for the commitment and help.

Re: Setting Start and End Dates

Posted: Wed Feb 19, 2020 8:57 am
by nilucshansiva
Hi @amosbatto,

In my case, users should not be able to select a date older than today. I was able to achieve this using your answer. However I am curious about what we actually do here.

We are actually setting the @@maxDate variable value into date('Y-m-d').
I tried giving this value straight into Max Date property in Dynaform. It did not work.
I tried initializing Max Date property with new Date() (JavaScript) and @@MaxDate = new Date(). It did not work as well.

Is date() is a ProcessMaker specific function? Appreciate your help on this.

Best Regards