Enhanced DatePicker

DatePicker with ability to format by pattern

View larger

Close

View larger

Close

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.

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

Links

• Online Demo
• View on GitHub
• Edit

Compatibility