Directory

← Back

EnhancedDateTimePicker

DateTimePicker with ability to format by pattern

Author

Rating

Popularity

100+

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");

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Bugfixes

Released
2021-09-29
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 15
Vaadin 16
Vaadin 17
Vaadin 18
Vaadin 19
Vaadin 23 in 2.0.4
Vaadin 22 in 2.0.3
Vaadin 21 in 2.0.3
Vaadin 20 in 2.0.1
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

EnhancedDateTimePicker - Vaadin Add-on Directory

DateTimePicker with ability to format by pattern EnhancedDateTimePicker - Vaadin Add-on Directory
This component is based on [DateTimePicker component for Vaadin Flow](https://github.com/vaadin/vaadin-date-time-picker-flow) and also in [EnhancedDatePicker component](https://github.com/vaadin-component-factory/enhanced-date-picker). 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](https://github.com/vaadin/vaadin-time-picker-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](https://date-fns.org/v2.0.0-beta.2/docs/Getting-Started). 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.
Online