Directory

Date Range Picker

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

View larger

Close

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

• View on GitHub
• Issue tracker
• Online Demo

Compatibility