feat(ui5-daterange-picker): two months mode is implemented#13196
feat(ui5-daterange-picker): two months mode is implemented#13196
Conversation
|
🚀 Deployed on https://pr-13196--ui5-webcomponents-preview.netlify.app |
| } | ||
|
|
||
| _clearValue() { | ||
| this._tempValue = ""; |
There was a problem hiding this comment.
We should only clear the _tempValue, because if the user has an existing date range (e.g., "Jan 1 - Jan 15"), opens the picker on mobile, selects new dates but then clicks Cancel, the original value is destroyed. Cancel should discard the new selection and restore the previous value, not clear everything.
So just this._tempValue = "";
| _showTwoMonths = false; | ||
|
|
||
| @property({ type: Boolean }) | ||
| stretch = false; |
There was a problem hiding this comment.
the property is still in the Calendar.ts file, and it is not used anywhere
| --_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 0.5rem; | ||
| --_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0; | ||
| --_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem; | ||
| --_ui5_calendar_multiple_months_height: calc(var(--_ui5_calendar_height)); |
There was a problem hiding this comment.
we don't need calc here, var(--_ui5_calendar_height) is enough
| cy.get<Calendar>("#cal") | ||
| .then($cal => { | ||
| const selectedDates = $cal[0].selectedDates; | ||
| expect(selectedDates).to.have.length.greaterThan(1); |
There was a problem hiding this comment.
After selecting a range, the exact length should be 2. Using greaterThan(1) would pass even with 3+ dates. Please fix in DateRangePicker.cy.tsx test file as well as there are some occurrencies also.
| .ui5DateRangePickerGetCalendarHeaders() | ||
| .eq(0) | ||
| .find("[data-ui5-cal-header-btn-month]") | ||
| .focus(); |
There was a problem hiding this comment.
While .focus() works in some cases, the project convention is to use .realClick() for interaction testing.
3 participants
This PR adds a new showTwoCalendars property to the DateRangePicker component that displays two consecutive months side by side, making it easier to select date ranges that span multiple months.
New Property - showTwoMonths (boolean, default: false)