Directory

← Back

Date Range Picker

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

Author

Rating

Popularity

700+

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 web component version to 5.0.2 (#45)
Released
2024-08-22
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

Date Range Picker - Vaadin Add-on Directory

This is a component to select a date range with single calendar popup. Date Range Picker - Vaadin Add-on Directory
This is a component to select a date range with single calendar popup. This project is based on [DatePicker component for Vaadin Flow](https://github.com/vaadin/vaadin-date-picker-flow) and also in [EnhancedDatePicker](https://github.com/vaadin-component-factory/enhanced-date-picker). 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](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 #### 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 ### Sponsored development Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
View on GitHub
Issue tracker
Online Demo

Date Range Picker version 1.0.0
### Version 1.0.0 - Initial release

Date Range Picker version 1.1.0
### Version 1.1.0 - Small fixes - Added method to set placeholder for the end date

Date Range Picker version 1.2.0
### Version 1.2.0 - Numerous fixes and new version web component

Date Range Picker version 1.2.1
### Version 1.2.1 - Fix issue with setPattern not having immediate effect

Date Range Picker version 1.3.0
New Features: Adding a specific class for certain dates so they can be styled differently Hiding the side panel (toolbar) Have support for hiding the textfields and control the opening the popup at a certain position Bugfixes: Correct date range selection logic

Date Range Picker version 1.4.0
* Solved issue related to having this component along with an EnhancedDatePicker together * Using the latest version of the web component

Date Range Picker version 1.5.0
Solved problem when clicking Esc key

Date Range Picker version 1.6.0
### BugFixes * Problem with Esc key while popup is opened [#13](https://github.com/vaadin-component-factory/vcf-date-range-picker/issues/13) * Weeks presets should support Monday starting weeks [#15](https://github.com/vaadin-component-factory/vcf-date-range-picker/issues/15) * Return key deletes end date when entering dates by keyboard [#18](https://github.com/vaadin-component-factory/vcf-date-range-picker-flow/issues/18) * Problems when using it inside a ConfirmDialog [#19](https://github.com/vaadin-component-factory/vcf-date-range-picker-flow/issues/19) * Problem when using it inside a Grid [#20](https://github.com/vaadin-component-factory/vcf-date-range-picker-flow/issues/20)

Date Range Picker version 1.7.0
### Bugfixes Now using 4.8.7 version of the vcf-date-range-picker with the following fixes: * Fix unwanted overlapping when the form is too narrow. * Fix a wrong behavior because it was always assuming that the focused element was the start date element, but now with the range it could also be the end date element * Set correct _selectingStartDate value when the focus is on the input end element

Date Range Picker version 1.8.0
### Bugfixes * Show presets at the bottom in fullscreen mode * Make month's width fixed and overlay's auto * Avoid disabling "before" when pointer is coarse * Add proper handling of null values

Date Range Picker version 1.9.0
### Bugfixes * Make the year toggle button smaller (fixed [#26](https://github.com/vaadin-component-factory/vcf-date-range-picker/issues/26))

Date Range Picker version 2.0.0
Added Vaadin 21+ support

Date Range Picker version 2.0.1
Update web component version to 4.8.11 (fixes [#33](https://github.com/vaadin-component-factory/vcf-date-range-picker-flow/issues/33)).

Date Range Picker version 3.0.0
* Add support for Vaadin 23 * Update web-component versionto 4.9.0 (fixes [#29](https://github.com/vaadin-component-factory/vcf-date-range-picker/issues/29) & [#30](https://github.com/vaadin-component-factory/vcf-date-range-picker/issues/31))

Date Range Picker version 1.10.0
### BugFixes * Pin web component version to 4.8.10

Date Range Picker version 3.0.1
Update web component version to 4.9.1

Date Range Picker version 1.10.1
Update web component dependency to 4.8.12.

Date Range Picker version 3.0.2
Update web component dependency to 4.9.2.

Date Range Picker version 4.0.0
Update version to be compatible with Vaadin 23.1 & 23.2.

Date Range Picker version 1.10.2
Update web component dependency to 4.8.13.

Date Range Picker version 2.0.2
Update web component to version 4.8.13.

Date Range Picker version 4.0.1
Update web component version to 4.9.3 to avoid forcing blur when tabing out of the end range input field.

Date Range Picker version 5.0.0
Update for Vaadin 24.

Date Range Picker version 5.0.1
* Update web component dependency to 5.0.1 to prevent overlay not opening.

Date Range Picker version 5.0.2
* Update web component version to 5.0.2 ([#45](https://github.com/vaadin-component-factory/vcf-date-range-picker-flow/issues/45))

Online