Datetime picker - constrain to future or past dates only (and other enhancements)

UI Builder
1

Hi,

I’ve started making use of the datetime picker.

I have run into a few things which make it more difficult to use for the end user:

  • I haven’t found a way to take the user or client locale into account, as reported also here: Date time picker: other languages?

  • It would be very useful to be able to constrain the input to only dates in the future, or dates in the past, depending on the use case. For example I use it for the user to set a reminder, and a reminder has no use if set in the past :wink:

  • I also haven’t found a way to independently change the style of the Reset, Cancel and OK button. They all seem to have the same classes. Is there a way to either attribute different classes to one or the other, or alternatively to change their color independently ? (for example Cancel in Red and OK in green).

1 Like
2

Hi @Nicolas_REMY

Thank you for these suggestions

We already have a ticket for that: BKNDLSS-28225

It would be very useful to be able to constrain the input to only dates in the future, or dates in the past, depending on the use case. For example I use it for the user to set a reminder, and a reminder has no use if set in the past :wink:

We already have a ticket for that: BKNDLSS-26534

  • I also haven’t found a way to independently change the style of the Reset, Cancel and OK button. They all seem to have the same classes. Is there a way to either attribute different classes to one or the other, or alternatively to change their color independently ? (for example Cancel in Red and OK in green).

Yes, at this moment there are no specific classes for these buttons, but you can use the following styles to change colors based on their position number

.bl-datetime-picker-dialog .MuiDialogActions-root .MuiButton-root:nth-child(1){
	background: #b79833;
}

.bl-datetime-picker-dialog .MuiDialogActions-root .MuiButton-root:nth-child(2){
    background: #e01815;
}

.bl-datetime-picker-dialog .MuiDialogActions-root .MuiButton-root:nth-child(3){
    background: #1da325;
}

UI Builder - Backendless 2022-05-03 09-03-26
UI Builder - Backendless 2022-05-03 09-03-26732×610 23.4 KB

3

Thanks for the styles, I will try that. As for the other items, good that it’s on the way. Thanks

4

Hi @vladimir-upirov ,

Just a quick follow-up regarding the ticket for localizing the date picker : users are drawing my attention to the fact that it is in English only.

So I am wondering : except if this is coming very soon, otherwise could you perhaps suggest how I could duplicate the component to translate it ? Then when the official datepicker is localized I could shift back.

Thank you for your feedback.

Best regards

5

Hi,

I was wondering where your internal tickets BKNDLSS-28225 and BKNDLSS-26534 stand ?
Date localization is quite a subject with users.
Thanks for your feedback.

6

Hi @Nicolas_REMY

Tickets are open, but unfortunately, these improvements will not be implemented in the near future.

Regards,
Viktor Mudrevsky

7

Thanks @Viktor_Mudrevsky for the feedback.

That is quite a pity.

As already asked in early July, if this is not to be implemented, “could you perhaps suggest how I could duplicate the component to translate it ?”

Thank you.

8

You can try to use the custom components - Custom UI Components in Backendless UI Builder

here are examples: ui-builder-library/components at main · Backendless/ui-builder-library · GitHub

Regards,
Viktor

9

Loving the datetime picker… but would like to trigger it programmatically (so instead of user clicking directly on it, user clicks on some other component somewhere else and the datetime picker should behave as if it had been clicked to open the calendar picker. Per chance is there some value or event in the component I can access with Codeless?

10

Hello @Alex_Klein!

Unfortunately, this is not currently available, perhaps we will add this functionality in the future.

Regards,
Alexander

11

Hi @Alexander_Pavelko thanks for the quick reply… so there is no “state” in the component where it’s activated and it could be set to “active”? We’ll work around it but do let me know if/when additional functionality is added, thank you again :slight_smile:

12

You’re welcome, we are always happy to help :slightly_smiling_face:

The component has a state, but it is under the hood.
I’ve created ticket BKNDLSS-30702 to discuss this possibility, we’ll let you know the results of our discussion as soon as possible.

Regards,
Alexander