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
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 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