Skip to content

feat(ui5-dynamic-date-range): introduce From/To (Date & Time) option #12341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

feat(ui5-dynamic-date-range): introduce From/To (Date & Time) option #12341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
990c766
feat(ui5-dynamic-date-range): Introduce Date/Time Range Option
didip1000 Sep 12, 2025
28007af
test: add cypress tests and fix issues
didip1000 Sep 23, 2025
1fb87d4
Merge branch 'main' into ddr-dtr
didip1000 Sep 25, 2025
521c167
fix: issue with selecting dates
didip1000 Sep 25, 2025
0a8b6c3
Merge branch 'main' into ddr-dtr
didip1000 Sep 26, 2025
05157c3
Merge branch 'main' into ddr-dtr
ilhan007 Sep 26, 2025
abbb095
Merge branch 'main' into ddr-dtr
ilhan007 Sep 26, 2025
21bad69
Merge branch 'ddr-dtr' of github.com:SAP/ui5-webcomponents into ddr-dtr
didip1000 Oct 2, 2025
91b6488
Merge branch 'main' into ddr-dtr
didip1000 Oct 2, 2025
4c7512b
docs: add option to basic playground sample
didip1000 Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 111 additions & 119 deletions packages/main/cypress/specs/DynamicDateRange.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import DateRange from '../../src/dynamic-date-range-options/DateRange.js';
import Today from '../../src/dynamic-date-range-options/Today.js';
import LastOptions from '../../src/dynamic-date-range-options/LastOptions.js';
import NextOptions from '../../src/dynamic-date-range-options/NextOptions.js';
import DateTimeRange from '../../src/dynamic-date-range-options/DateTimeRange.js';

describe('DynamicDateRange Component', () => {
beforeEach(() => {
cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE">
</DynamicDateRange>
cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE, DATETIMERANGE"></DynamicDateRange>
);
});

Expand Down Expand Up @@ -36,41 +36,16 @@ describe('DynamicDateRange Component', () => {
const mockOptions: Array<IDynamicDateRangeOption> = [
new Today(),
new SingleDate(),
new DateRange()
new DateRange(),
new DateTimeRange()
];

cy.get('[ui5-dynamic-date-range]')
.as("ddr");

cy.get("@ddr")
.shadow()
.find('[ui5-input]')
.as("input");

cy.get("@input")
.should('exist');

cy.get("@input")
.find('[ui5-icon]')
.as("icon");

cy.get("@icon")
.realClick(); // Open the picker

cy.get("@ddr")
.shadow()
.find("[ui5-responsive-popover]")
.as("popover");

cy.get("@popover")
.should('exist');

cy.get("@popover")
.find("[ui5-list]")
.as("list");

cy.get('@list')
.find("[ui5-li]")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeGetOptionsList()
.as("listItems");

cy.get("@listItems")
Expand All @@ -87,35 +62,9 @@ describe('DynamicDateRange Component', () => {
cy.get('[ui5-dynamic-date-range]')
.as("ddr");

cy.get("@ddr")
.shadow()
.find('[ui5-input]')
.as("input");

cy.get("@input")
.should('exist');

cy.get("@input")
.find('[ui5-icon]')
.as("icon");

cy.get("@icon")
.realClick(); // Open the picker

cy.get("@ddr")
.shadow()
.find("[ui5-responsive-popover]")
.as("popover");

cy.get("@popover")
.should('exist');

cy.get("@popover")
.find("[ui5-list]")
.as("list");

cy.get('@list')
.find("[ui5-li]")
cy.get("@ddr")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeGetOptionsList()
.as("listItems");

cy.get("@listItems")
Expand Down Expand Up @@ -334,8 +283,7 @@ describe('DynamicDateRange Component', () => {

describe('DynamicDateRange Last/Next Options', () => {
beforeEach(() => {
cy.mount(<DynamicDateRange options="LASTDAYS, NEXTWEEKS, LASTMONTHS">
</DynamicDateRange>
cy.mount(<DynamicDateRange options="LASTDAYS, NEXTWEEKS, LASTMONTHS"></DynamicDateRange>
);
});

Expand All @@ -347,36 +295,8 @@ describe('DynamicDateRange Last/Next Options', () => {
.as("ddr");

cy.get("@ddr")
.shadow()
.find('[ui5-input]')
.as("input");

cy.get("@input")
.shadow()
.find("input")
.as("innerInput");

cy.get("@input")
.find('[ui5-icon]')
.as("icon");

cy.get("@icon")
.realClick();

cy.get("@ddr")
.shadow()
.find("[ui5-responsive-popover]")
.as("popover");

cy.get("@popover")
.should('exist');

cy.get("@popover")
.find("[ui5-list]")
.as("list");

cy.get("@list")
.find("[ui5-li]")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeGetOptionsList()
.as("listItems");

cy.get("@listItems")
Expand Down Expand Up @@ -432,33 +352,8 @@ describe('DynamicDateRange Last/Next Options', () => {
.as("ddr");

cy.get("@ddr")
.shadow()
.find('[ui5-input]')
.as("input");

cy.get("@input")
.shadow()
.find("input")
.as("innerInput");

cy.get("@input")
.find('[ui5-icon]')
.as("icon");

cy.get("@icon")
.realClick();

cy.get("@ddr")
.shadow()
.find("[ui5-responsive-popover]")
.as("popover");

cy.get("@popover")
.find("[ui5-list]")
.as("list");

cy.get("@list")
.find("[ui5-li]")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeGetOptionsList()
.as("listItems");

cy.get("@listItems")
Expand Down Expand Up @@ -548,3 +443,100 @@ describe('DynamicDateRange Last/Next Options', () => {
.should('have.attr', 'selected');
});
});

describe('DynamicDateRange DateTimeRange Option', () => {
beforeEach(() => {
cy.mount(<DynamicDateRange options="DATETIMERANGE"></DynamicDateRange>);
});

it("should select DateTimeRange option and pick 2 dates from the DateTimePickers", () => {
cy.get("[ui5-dynamic-date-range]")
.as("ddr")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeSelectOption()
.ui5DynamicDateRangeSetDateTime("from-picker", "Dec 25, 2023, 2:30:00 PM")
.ui5DynamicDateRangeSetDateTime("to-picker", "Dec 26, 2023, 4:45:00 AM")
.ui5DynamicDateRangeSubmit();

cy.get("@ddr")
.shadow()
.find("[ui5-input]")
.as("input");

cy.get("@input")
.should("have.value", "Dec 25, 2023, 2:30:00 PM - Dec 26, 2023, 4:45:00 AM");
});

it("should auto-correct date order when second date is earlier than first", () => {
cy.get("[ui5-dynamic-date-range]")
.as("ddr")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeSelectOption()
.ui5DynamicDateRangeSetDateTime("to-picker", "Dec 25, 2023, 2:30:00 PM")
.ui5DynamicDateRangeSetDateTime("from-picker", "Dec 26, 2023, 4:45:00 AM")
.ui5DynamicDateRangeSubmit();

cy.get("@ddr")
.shadow()
.find("[ui5-input]")
.as("input");

cy.get("@input")
.should("have.value", "Dec 25, 2023, 2:30:00 PM - Dec 26, 2023, 4:45:00 AM");
});

it("should parse input value correctly when option is reopened", () => {
cy.get("[ui5-dynamic-date-range]")
.as("ddr");

cy.get("@ddr")
.shadow()
.find("[ui5-input]")
.as("input");

cy.get("@input")
.shadow()
.find("input")
.as("innerInput");

cy.get("@innerInput")
.clear()
.realType("Jan 4, 2025, 12:00:00 AM - Feb 26, 2025, 11:59:00 PM")
.realPress("Enter");

cy.get("[ui5-dynamic-date-range]")
.as("ddr")
.ui5DynamicDateRangeOpen()
.ui5DynamicDateRangeSelectOption();

// Verify the parsed dates are displayed in the pickers
cy.get("@ddr")
.shadow()
.find("[ui5-responsive-popover]")
.as("popover");

cy.get("@popover")
.find("[ui5-datetime-picker]#from-picker")
.as("fromPicker");

cy.get("@fromPicker")
.shadow()
.find("[ui5-datetime-input]")
.as("fromInput");

cy.get("@fromInput")
.should("have.value", "Jan 4, 2025, 12:00:00 AM");

cy.get("@popover")
.find("[ui5-datetime-picker]#to-picker")
.as("toPicker");

cy.get("@toPicker")
.shadow()
.find("[ui5-datetime-input]")
.as("toInput");

cy.get("@toInput")
.should("have.value", "Feb 26, 2025, 11:59:00 PM");
});
});
1 change: 1 addition & 0 deletions packages/main/cypress/support/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import "./commands/ColorPalettePopover.commands.js";
import "./commands/ColorPicker.commands.js";
import "./commands/DateTimePicker.commands.js";
import "./commands/DateRangePicker.commands.js";
import "./commands/DynamicDateRange.commands.js";
import "./commands/Dialog.commands.ts";
import "./commands/Popover.commands.ts";
import "./commands/ResponsivePopover.commands.js";
Expand Down
Loading
Loading