Datetime picker more control on user input

Hilla
1
  1. Is there any event which can tell user have clicked on “Today” so we can automatically set current time in the time field?
    Or when using datetimepicker, I would like to get if just date is selected, and then set time automatically?
    So users do not have to click on time field again after clicking today ( may be have option called now? )

onValueChange or onChange does not give value when fired with just date filled in.

  1. I would like to parse the date or time entered by user to automatically include //__ and :

So user can type 03142024 and it will be 03/14/2024 and time if typed 1124 it will be 11:24

2

Regarding 2:

For the date picker, you can use the i18n formats to define “shortcut” variants. Simply set your US format as the primary one (“MM/dd/yyyy”) and then the shortcuts as addition ones.

i18n.setDateFormats("MM/dd/yyyy", "MMddyyyy", "M", "MM", "MMd", "MMdd", ...).

The time picker has no custom formatting afaik, but it should allow shortcut inputs without any separators and format them as necessary.

3

Hi Stefan,

Any idea how to do this in Hilla? I tried to import i18n in index.tsx and set this format there. But i18n does not have any method called setDateFormats.

It shows configure option which only have language

4

My bad, I oversaw that you posted in the hilla channel.

In JS/TS you can simply redefine the parsing function by modifying the date picker’s i18n object. It has a “parseDate” property, that points to a simple function. You can parse the input string here by yourself using normal javascript (or some lib) and return an object representing the parsed date.

https://cdn.vaadin.com/vaadin-web-components/24.6.0/#/elements/vaadin-date-picker#property-i18n

1 Like
5

Are you using React? If yes, here is an example how to make custom DatePicker with formatter

My particular use case is slightly different though, but I think it gives great overview of the API nevertheless.

1 Like