Date Range Picker
This is a component to select a date range with single calendar popup.
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
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 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");
}
}
Links
Compatibility
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 dependency to 4.8.12.
- Released
- 2022-07-20
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14
- Vaadin 15
- Vaadin 16
- Vaadin 17
- Vaadin 18
- Vaadin 19
- Vaadin 20
- Vaadin 24 in 5.0.2
- Vaadin 23 in 4.0.1
- Vaadin 22 in 2.0.2
- Vaadin 21 in 2.0.2
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge
Date Range Picker - Vaadin Add-on Directory
This is a component to select a date range with single calendar popup.
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))