Date Picker - custom ranges of dates

Hi,

Is there a way to customize available dates in the date picker according to a result of a variable ?
My use case is that an insurance company can only start a new contract every 1st day of a month, 1 month after the subscription.

  • if subscription on February 28th ==> first available date ==> 1st April, 1st of May…
  • if subscription on February 15th ==> first available date ==> 1st April, 1 May etc…
  • if subscription on February 1st ==> first available date ==> 1st April, 1 May etc…

In other terms, I want to set ranges of date (just like we would do for bookings apps I guess)

Hey @MaxenceP, pretty sure we can’t do this in no-code at the moment but you’re not the only one who needs more flexibility with this element. The product team will look into it and evaluate how we can improve the element down the line.

In the meantime, maybe @dorilama has ideas on how you could do it in JS?

I tried playing around with HTML attributes as @kevinwasie suggested for another element but couldn’t find a solution :confused:

@Joyce if the datetime picker is this element from a quick look it seems using a library to handle the calendar input and corresponding logic. If this is the case you can’t handle this with some js snippet.
The good news is that the library it seems to use supports disabling dates, so either the weweb team can add this option or anybody can just fork the element, add the modification and use it as a custom element in weweb. I am assuming that the weweb element is using that library from a quick look at the dependencies of the github repository.

Of course you can use the element as is and then validate the selected date and inform the user (eg. “you should select 3 of august”)

Another option is to use the calendar element, set the events dynamically and hadle the logic with workflows triggered by click on event. You probably want to display the calendar only when selecting the date and a text with the selected date otherwise.

Or if you only have specific dates you can create your own interface directly in weweb. Create the layout you prefer and display the dates with buttons. On click change a variable to keep track of the selected date, style the buttons differently if they are selected.

There is a lot of ways of doing this in weweb even without code.

1 Like

Great feedback! Thanks for taking a look @dorilama :pray:
Really appreciate it!

1 Like

Hi @dorilama , thank you for your help.
I had the same idea than you and went for a message on show to the user when selecting a wrong date

great! you can always improve on that on other iterations of the app. :slight_smile:

2 Likes