Directory

← Back

Date Range Picker

This is a component to select a date range with single calendar popup.

Author

Rating

Popularity

600+

This is a component to select a date range with single calendar popup.

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

On top of basic functionality of DatePicker, it has ability to select date ranges using only one scrollable calendar. As in EnhancedDatePicker, 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

Compatibility

  • Version 1.x.x supports Vaadin 14+
  • Version 2.x.x supports Vaadin 21+
  • Version 3.x.x supports Vaadin 23.0.x
  • Version 4.x.x supports Vaadin 23.1, 23.2 & 23.3
  • Version 5.x.x supports Vaadin 24

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

Sample code

    private void createSimpleDatePicker() {
        Div message = createMessageDiv("simple-picker-message");

        EnhancedDateRangePicker datePicker = new EnhancedDateRangePicker();

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

        datePicker.setId("simple-picker");

        add(datePicker, message);
    }

    private void updateMessage(Div message, EnhancedDateRangePicker datePicker) {
        LocalDate selectedStartDate = (datePicker.getValue()==null)?null:datePicker.getValue().getStartDate();
        LocalDate selectedEndDate = (datePicker.getValue()==null)?null:datePicker.getValue().getEndDate();
        if (selectedStartDate != null) {
        	String parsers = null;
        	if (datePicker.getParsers() != null)
        		parsers = Arrays.toString(datePicker.getParsers());
            message.setText(
                    "Start Day: " + selectedStartDate.getDayOfMonth()
                            + "\nStart Month: " + selectedStartDate.getMonthValue()
                            + "\nStart Year: " + selectedStartDate.getYear()
                            + "\nEnd Date: " + (selectedEndDate==null?"":selectedEndDate.getDayOfMonth())
                            + "\nEnd Month: " + (selectedEndDate==null?"":selectedEndDate.getMonthValue())
                            + "\nEnd Year: " + (selectedEndDate==null?"":selectedEndDate.getYear())
                            + "\nLocale: " + datePicker.getLocale()
                            + "\nFormatting pattern: " + datePicker.getPattern()
                            + "\nParsing pattern: " + parsers);
        } else {
            message.setText("No date is selected");
        }
    }

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

Update for Vaadin 24.

Released
2023-11-10
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 24
Vaadin 20 in 1.0.0
Vaadin 19 in 1.0.0
Vaadin 18 in 1.0.0
Vaadin 17 in 1.0.0
Vaadin 16 in 1.0.0
Vaadin 15 in 1.0.0
Vaadin 14 in 1.0.0
Vaadin 22 in 2.0.0
Vaadin 21 in 2.0.0
Vaadin 23 in 3.0.0
Browser
N/A

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online