Skip to content

chore(wizard, date picker): update tags and examples from js to ts #12208

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

Merged
nicolethoen merged 2 commits into from
Jan 12, 2026
+53 −53
Merged

chore(wizard, date picker): update tags and examples from js to ts #12208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b73e272
chore(wizard, date picker): update tags and examples from js to ts
Mash707 Jan 12, 2026
80d003b
chore(wizard, date picker): update tags and examples from js to ts
Mash707 Jan 12, 2026
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
48 changes: 1 addition & 47 deletions packages/react-core/src/demos/DatePicker/DatePicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,53 +13,7 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from

This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.

```js
import { useState } from 'react';
import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';

DateRangePicker = () => {
const [from, setFrom] = useState();
const [to, setTo] = useState();

const toValidator = (date) =>
isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';

const onFromChange = (_event, _value, date) => {
setFrom(new Date(date));
if (isValidDate(date)) {
date.setDate(date.getDate() + 1);
setTo(yyyyMMddFormat(date));
} else {
setTo('');
}
};

const onToChange = (_event, _value, date) => {
if (isValidDate(date)) {
setTo(yyyyMMddFormat(date));
}
};

return (
<Split>
<SplitItem>
<DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
</SplitItem>
<SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
<SplitItem>
<DatePicker
value={to}
onChange={onToChange}
isDisabled={!isValidDate(from)}
rangeStart={from}
validators={[toValidator]}
aria-label="End date"
placeholder="YYYY-MM-DD"
/>
</SplitItem>
</Split>
);
};
```ts file="./examples/DatePickerRange.tsx"
```

### Date and time pickers in modal
Expand Down
46 changes: 46 additions & 0 deletions packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useState } from 'react';
import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';

export const DatePickerRange: React.FunctionComponent = () => {
const [from, setFrom] = useState<Date | undefined>();
const [to, setTo] = useState<string>('');

const toValidator = (date: Date) =>
isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';

const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
setFrom(new Date(date));
if (isValidDate(date)) {
date.setDate(date.getDate() + 1);
setTo(yyyyMMddFormat(date));
} else {
setTo('');
}
};
Comment on lines +11 to +19
Copy link

@coderabbitai coderabbitai bot Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid mutating the input date parameter.

Line 14 mutates the date object passed as a parameter using setDate(). This side effect modifies the caller's date object, which can cause unexpected behavior. Create a copy before modifying.

🔧 Proposed fix 
  const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
    setFrom(new Date(date));
    if (isValidDate(date)) {
-      date.setDate(date.getDate() + 1);
-      setTo(yyyyMMddFormat(date));
+      const nextDay = new Date(date);
+      nextDay.setDate(nextDay.getDate() + 1);
+      setTo(yyyyMMddFormat(nextDay));
    } else {
      setTo('');
    }
  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
setFrom(new Date(date));
if (isValidDate(date)) {
date.setDate(date.getDate() + 1);
setTo(yyyyMMddFormat(date));
} else {
setTo('');
}
};
const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
setFrom(new Date(date));
if (isValidDate(date)) {
const nextDay = new Date(date);
nextDay.setDate(nextDay.getDate() + 1);
setTo(yyyyMMddFormat(nextDay));
} else {
setTo('');
}
};
🤖 Prompt for AI Agents 
In @packages/react-core/src/demos/DatePicker/examples/DatePickerRange.tsx around
lines 11 - 19, onFromChange mutates the incoming date parameter via
date.setDate(...), causing side effects; fix by cloning the date before
modifying and using that clone when calling setFrom and when computing the
next-day value for setTo (e.g., create a new Date(date) or Date.from copy),
preserve the isValidDate check, call setFrom with the cloned date, increment the
clone for yyyyMMddFormat, and avoid mutating the original parameter so callers
are not affected.


const onToChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
if (isValidDate(date)) {
setTo(yyyyMMddFormat(date));
}
};

return (
<Split>
<SplitItem>
<DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
</SplitItem>
<SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
<SplitItem>
<DatePicker
value={to}
onChange={onToChange}
isDisabled={!isValidDate(from)}
rangeStart={from}
validators={[toValidator]}
aria-label="End date"
placeholder="YYYY-MM-DD"
/>
</SplitItem>
</Split>
);
};
12 changes: 6 additions & 6 deletions packages/react-core/src/demos/Wizard/WizardDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,30 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard

### In modal

```js file="../examples/Wizard/InModal.tsx" isFullscreen
```ts file="../examples/Wizard/InModal.tsx" isFullscreen
```

### In modal, with drawer

```js file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
```ts file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
```

### In modal, with drawer and informational step

```js file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
```ts file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
```

### In page

```js file="../examples/Wizard/InPage.tsx" isFullscreen
```ts file="../examples/Wizard/InPage.tsx" isFullscreen
```

### In page, with drawer

```js file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
```ts file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
```

### In page, with drawer and informational step

```js file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
```ts file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
```
Loading