How to set a date selected from DateTime component as minDate of another Datetime component in Form.io builder front end

[nprla3s]

In formio builder, for datepicker component, was able to set the min & max dates to current date or specifying the number of days, months or years with moment() js add/subtract functions but its not allowing to set input of one datepicker(start date datepicker) control as min date of another datepicker control(end date date picker).

Would appreciate if examples provided on how to set the min/max dates to selected dates on change of one date component as another date components min/max date on form.io. Need it urgently.

[travist]

Does this work?

moment(data.otherDate, '-3 days')

[nprla3s]

@travist No it did not work. I have two date fields with ids inDate and outDate on formio form. Tried moment().subtract( moment().diff(data.inDate, 'days'), 'days') to set as min date of outDate DateTime component from front-end in form.io builder. But this also did not work.

[zoe-codez]

Hello, For doing relative date math, the code looks like this: moment(timestampString).add(+/- number, increment) ex: moment().subtract(data.inDate, 'd')

Are you trying to use the Custom Disabled Dates feature? There is a ticket that was just opened yesterday related to to that: FIO-2453 Custom Disabled Dates on Date/Time component doesn't work properly

This issue doesn't affect custom validation, so that can be used as a stopgap. See this example form for how to use custom validation to validate date components relative to other dates: https://form-io.gitbook.io/help/faq/examples#validate-dates-relative-to-other-dates

[nprla3s]

@ccontour Thanks for the above link & information. The code given is to perform validation on date field min max dates. (I did try them but did not work). The thing is, I am not looking for validating date components. What I am looking for is, when I select a date from one datepicker the dates in the calender of one more date component should be disabled and the dates only after the previously selected date from 1st date component should be active and allowed to be selected by user. For example, I have two datepickers with ids 'inDate' & 'outDate' on my formio form. When I select a date from 'inDate' like 7-Mar-2021, this should be set as minDate of 'outDate' date component i.e the dates till 7-Mar-2021 in 'outDate' component calender should get disabled. It should allow me only to select the dates after 7-Mar-2021. Is this possible in anyway in form builder front end. Please let me know with screenshots on how it can be done. Your help is appreciated.

[rpask00]

Hi, does anyone managed to solve this issue?

[dev-thinks]

Hello, For doing relative date math, the code looks like this: moment(timestampString).add(+/- number, increment) ex: moment().subtract(data.inDate, 'd')

Are you trying to use the Custom Disabled Dates feature? There is a ticket that was just opened yesterday related to to that: FIO-2453 Custom Disabled Dates on Date/Time component doesn't work properly

This issue doesn't affect custom validation, so that can be used as a stopgap. See this example form for how to use custom validation to validate date components relative to other dates: https://form-io.gitbook.io/help/faq/examples#validate-dates-relative-to-other-dates

Looks like custom disable function for date is still not working.

tried to hookup date validation based on other date field (similar like, start and end dates) and i couldn't able to get the start date value from "data" object variable. "disableFunction": "moment(date).isBefore(data.startDate)",

getting console error: utils.js:364 An error occured within custom function for unknown ReferenceError: data is not defined at eval (eval at evaluator (Evaluator.js:1:1), <anonymous>:3:30)

[tomerazran]

Hi, does anyone managed to solve this issue?

Hi, I'm having the same problem. I cannot set maximum date dynamically based on other form date.

[dev-thinks]

Hi, does anyone managed to solve this issue?

Hi, I'm having the same problem. I cannot set maximum date dynamically based on other form date.

I am using custom validator which is working fine.

valid = moment(endDateTime).isAfter(moment(startDateTime))? true : 'End date should be greater than start date';

[tomerazran]

Hi, does anyone managed to solve this issue?

Hi, I'm having the same problem. I cannot set maximum date dynamically based on other form date.

I am using custom validator which is working fine.

valid = moment(endDateTime).isAfter(moment(startDateTime))? true : 'End date should be greater than start date';

That does not solve the problem since I don't want to show an alert - I want to limit dates range

[Mimisss]

FWIW, when in a Edit Grid row, the validation expression becomes:

valid = moment(input).isAfter(moment(row.startDate))? true : 'End date should be greater than start date';

row can be changed to data when outside a composite component.

Likewise, a custom default value related to a starting date can be:

value = moment(data.startDate).add(1, 'days');

But the formio variables are NOT available in the Custom Disabled Dates script, for example:

date <= new Date(data.startDate)

gives error An error occured within custom function for unknown ReferenceError: data is not defined which is probably because data means nothing to flatpickr's disable function:

{
    "label": "End Date",
    "format": "yyyy-MM-dd",
    "tableView": false,
    "datePicker": {
        "disableFunction": "date <= data.startDate",
    },
    ...

The same applies to setting the min and max dates in the Validation tab.

Another option would be to configure flatpickr through Flatpickr options in the Data tab but this is gloriously ignored, for example:

{
  "disable": [
    {
      "from": "2022-10-20",
      "to": "2022-10-26"
    }
  ]
}

results in:

  "customOptions": {
      "disable": [
          {
              "from": "2022-10-20",
              "to": "2022-10-26"
          }
      ]
  },

which is not taken into account by the resulting component, unfortunately.

[wag110894]

@Mimisss, what version of formio.js are you using? Can you provide a JSfiddle of this issue occurring?

[Mimisss]

@Mimisss, what version of formio.js are you using? Can you provide a JSfiddle of this issue occurring?

I am using the formio portal next.form.io

Funny, the following works in JSfiddle:

"datePicker": {
    "disableFunction": "date <= new Date(data.startDate)",
}

But in the formio portal renderer causes error:

scripts.js:2 An error occured within custom function for unknown ReferenceError: data is not defined

[Tatsiana8]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!