Home > Forum > Forms > Calendar DateTime - activate date selection in current month, deactivate date selection before and after current month

Calendar DateTime - activate date selection in current month, deactivate date selection before and after current month
0

Hello Community,
is it possible to deactivate in the calendar in the DateTime attribute the possibility to select dates from months before the current month and dates from months after the current month ?
Example in the picture - January no possibility of selection (disable), February possibility of selection (enable).

MVP

Hi,
I haven't tried it, but I believe it's possible through JavaScript if you manage to retrieve the field's ID from the HTML.
I would opt for creating an HTML type field with a data type field and make the modifications there.
It would be simpler to set an alert action at the field level and alert users that they have not selected the correct value.

Thanks,
Raluca

MVP
In reply to: Raluca-Mirabela Lupu

Hi,
I haven't tried it, but I believe it's possible through JavaScript if you manage to retrieve the field's ID from the HTML.
I would opt for creating an HTML type field with a data type field and make the modifications there.
It would be simpler to set an alert action at the field level and alert users that they have not selected the correct value.

Thanks,
Raluca

Hi Sandra,
Similar way to what Raluca mentioned - I'm usually creating Form Validation action, on step Exit, which checks if the date is not in the past.
This way there is no custom code required.

In reply to: Maksymilian Stachowiak

Hi Sandra,
Similar way to what Raluca mentioned - I'm usually creating Form Validation action, on step Exit, which checks if the date is not in the past.
This way there is no custom code required.

I know this solution. Unfortunately, the application requires the approach I described in the post. Thank you Raluca and Maksymilian for your willingness to help.

MVP
In reply to: Sandra Bochenek

I know this solution. Unfortunately, the application requires the approach I described in the post. Thank you Raluca and Maksymilian for your willingness to help.

Hi Sandra,

I went down the rabbit hole how we could customize it. I would have been interested in a solution too.

First approach: Create a form field extension
I didn't come very far with this because I wasn't able to create the basic setup for a generic form field extension due various errors.
Copying over a FormFieldExtension folder from another project didn't work either.
While doing so I tried to figure out which library is used by WEBCON. It seems that it's a fork of an outdated version of the react-date-picker component.
But as I mentioned in the end I wasn't able to build even the default extension.

Second approach: HTML field
The source code of the date picker clearly shows that it's not setup for min/max dates.
One alternative would be to use the field as a technical field and display a custom HTML input field of type date. The picker would have a different layout, but at least it supports min/max dates.
The problem with this is, that the date format cannot be defined. It defaults to the browser language, which can differ from the profile language. It will also validate the format of the value.
If the WEBCON date field doesn't support min/max dates, and the standard doesn't have a solution for languages, you could either look for an alternative date picker, or mix the date fields the other way around. The date picker of the custom field could trigger the date picker of the hidden standard input field. Even if you make it work with all the logic, like new date, no changed date, empty date and so on. You would still be left with validating a manually entered value in the field which should match the profile language. We are back where we started.

For the moment I have no interested in investigating this further. Maybe someone else gleaned an idea from these thoughts.

Best regads,
Daniel