Datetime picker more control on user input

sagarsncsw · March 15, 2025, 6:26am

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.

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

Stefan.27 · March 17, 2025, 12:30pm

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.

sagarsncsw · March 18, 2025, 1:37am

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

Stefan.27 · March 18, 2025, 4:37am

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

Tatu2 · March 20, 2025, 11:18am

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

github.com

TatuLund/hilla-v2-demo/blob/v24/frontend/components/localizeddatepicker/LocalizedDatePicker.tsx

import { DatePicker, DatePickerDate, DatePickerI18n, DatePickerProps } from '@vaadin/react-components/DatePicker.js';
import dateFnsFormat from 'date-fns/format';
import dateFnsParse from 'date-fns/parse';
import { DatePicker as DatePickerWebComponent } from '@vaadin/date-picker/vaadin-date-picker.js';
import { forwardRef } from 'react';

type Months = Record<string, string[]>;
type Weekdays = Record<string, string[]>;
type DateFormats = Record<string, string>;
type WeekStarts = Record<string, number>;

type LocalizedText = Record<string, string>;
type Localization = Record<string, LocalizedText>;
type I18ns = Record<string, DatePickerI18n>;

export type Language = 'us' | 'fi';

const monthNames: Months = {
  us: [
    'January',

This file has been truncated. show original

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