Directory

← Back

Date Range Picker

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

Author

Contributors

Rating

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

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

Links

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 version to be compatible with Vaadin 23.1 & 23.2.

Released
2022-09-23
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 22 in 2.0.1
Vaadin 21 in 2.0.1
Vaadin 20 in 1.10.1
Vaadin 19 in 1.10.1
Vaadin 18 in 1.10.1
Vaadin 17 in 1.10.1
Vaadin 16 in 1.10.1
Vaadin 15 in 1.10.1
Vaadin 14 in 1.10.1
Browser
N/A
Online