Directory

← Back

Enhanced DatePicker

DatePicker with ability to format by pattern

Author

Rating

Popularity

100+

EnhancedDatePicker component for Vaadin Flow

Note Vaadin 22 and Vaadin 14.8

There is major update in DatePicker component in Vaadin 22 and Vaadin 14.8 frameworks. The features of this add-on have been incorporated into standard DatePicker component, thus it is not recommended and not needed to use this add-on with these and newer versions of the framework.

Enhanced DatePicker

This project is extending DatePicker component for Vaadin Flow. On top of basic functionality of DatePicker, it has ability to format date by pattern. Formatting 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

Pattern can be set using method setPattern(String pattern). For example:

EnhancedDatePicker datePicker;
datePicker.setPattern("dd-MMM-yyyy");

or by using constructor: new EnhancedDatePicker(LocalDate.now(), "dd-MMM-yyyy");

This component can be used in combination with <vaadin-date-picker>. In HTML/JS template you can add <vaadin-date-picker id="datePickerId"></vaadin-date-picker> and in Java side, you can bind it to EnhancedDatePicker like this:

@Id("datePickerId")
private EnhancedDatePicker datePicker;

As this component is replacement for DatePicker, please make sure that you use helper classes(like ChangeEvent, OpenedChangeEvent or InvalidChangeEvent) from EnhancedDatePicker and not form DatePicker.

NOTE: Localisation in this component is also done by DateFns and some locales for some patterns are not stable: for example Russian and French for pattern MMM(it adds '.' in the end of month and then it can not parse it back)

NOTE: This component extends vaadin-date-picker-flow version 2.1.0, if you update Vaadin to newer version, you may need to do maven exclusion to this dependency.

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

EnhancedDatePicker datePicker;
datePicker.setPattern("dd-MMM-yyyy");
// HTML
<vaadin-date-picker id="datePickerId"></vaadin-date-picker>

//JAVA
@Id("datePickerId")
private EnhancedDatePicker datePicker;
EnhancedDatePicker datePicker = new EnhancedDatePicker(LocalDate.now(), "dd-MMM-yyyy");
UpdateMessage(message, datePicker);

datePicker.addValueChangeListener(
        event -> UpdateMessage(message, datePicker));

TextField patten = new TextField();
patten.setLabel("Define a pattern");
patten.setValue("dd-MMM-yyyy");

Button setPatternBtn = new Button("Set pattern from text field");
setPatternBtn.addClickListener(e -> {
    datePicker.setPattern(patten.getValue());
    UpdateMessage(message, datePicker);
});

Button dropPatternBtn = new Button("Drop pattern");
dropPatternBtn.addClickListener(e -> {
    datePicker.setPattern(null);
    UpdateMessage(message, datePicker);
});

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

Fix compatibility issue with Vaadin 14.11+

Released
2024-01-24
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 10+ in 1.0.0
Vaadin 18+ in 2.0.0
Browser
Firefox
Safari
Google Chrome
Microsoft Edge

Enhanced DatePicker - Vaadin Add-on Directory

DatePicker with ability to format by pattern Enhanced DatePicker - Vaadin Add-on Directory
# EnhancedDatePicker component for Vaadin Flow ## Note Vaadin 22 and Vaadin 14.8 There is major update in DatePicker component in Vaadin 22 and Vaadin 14.8 frameworks. The features of this add-on have been incorporated into standard DatePicker component, thus it is not recommended and not needed to use this add-on with these and newer versions of the framework. ## Enhanced DatePicker This project is extending [DatePicker component for Vaadin Flow](https://github.com/vaadin/vaadin-date-picker-flow). On top of basic functionality of DatePicker, it has ability to format date by pattern. Formatting 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 Pattern can be set using method `setPattern(String pattern)`. For example: ```java EnhancedDatePicker datePicker; datePicker.setPattern("dd-MMM-yyyy"); ``` or by using constructor: `new EnhancedDatePicker(LocalDate.now(), "dd-MMM-yyyy");` This component can be used in combination with [``](https://github.com/vaadin/vaadin-date-picker). In HTML/JS template you can add `` and in Java side, you can bind it to `EnhancedDatePicker` like this: ```java @Id("datePickerId") private EnhancedDatePicker datePicker; ``` As this component is replacement for DatePicker, please make sure that you use helper classes(like ChangeEvent, OpenedChangeEvent or InvalidChangeEvent) from `EnhancedDatePicker` and not form `DatePicker`. NOTE: Localisation in this component is also done by DateFns and some locales for some patterns are not stable: for example Russian and French for pattern `MMM`(it adds '.' in the end of month and then it can not parse it back) NOTE: This component extends vaadin-date-picker-flow version 2.1.0, if you update Vaadin to newer version, you may need to do maven exclusion to this dependency. ### Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online