EnhancedDateTimePicker

DateTimePicker with ability to format by pattern

View larger

Close

View larger

Close

This component is based on DateTimePicker component for Vaadin Flow and also in EnhancedDatePicker component.

The idea of the EnhancedDateTimePicker component is the possibility of adding format and parse patterns for both date & time parts of a DateTimePicker. Date part uses EnhancedDatePicker component and time part is using an extension of TimePicker component for Vaadin Flow that adds an API for setting formatting and parsing patterns.

As in EnhancedDatePicker, the formatting for the time part is done by JavaScript library date-fns v2.0.0-beta.2. More information about supported formatting paterns can be found here: https://date-fns.org/v2.0.0-beta.2/docs/format.

Main methods:

• to set a formatting pattern for date part

  EnhancedDateTimePicker#setDatePattern(String)

• to set a formatting pattern for time part

  EnhancedDateTimePicker#setTimePattern(String)

• to set a parsing patterns for date part

  EnhancedDateTimePicker#setDateParsers(String ...)

• to set a parsing patterns for time part

  EnhancedDateTimePicker#setTimeParsers(String ...)

For complete examples on EnhancedDateTimePicker see the demo class EnhancedDateTimePickerDemoView. Find the link to the repository in the Links section.

Sample code

EnhancedDateTimePicker dateTimePicker = new EnhancedDateTimePicker();
dateTimePicker.setValue(LocalDateTime.now());
dateTimePicker.setDatePattern("dd-MM-yyyy");
dateTimePicker.setTimePattern("HH.mm.ss");
dateTimePicker.setDateParsers("dd-MM-yyyy", "dd.MM.yy");
dateTimePicker.setTimeParsers("HH.mm.ss", "HH:mm");

Links

• Online Demo
• View on GitHub

Compatibility