@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/date-and-time/calendar-month/react.js

@@ -0,0 +1,283 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+const pageData = {
+  "id": "Calendar month",
+  "section": "components",
+  "subsection": "date-and-time",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/date-and-time/calendar-month/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md",
+  "relPath": "packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md",
+  "propComponents": [
+    {
+      "name": "CalendarMonth",
+      "description": "The main calendar month component.",
+      "props": [
+        {
+          "name": "cellAriaLabel",
+          "type": "(date: Date) => string",
+          "description": "Accessible label for the date cells."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes to add to the outer div of the calendar month."
+        },
+        {
+          "name": "date",
+          "type": "Date",
+          "description": "Month/year to base other dates around."
+        },
+        {
+          "name": "dayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in buttons in table cells.",
+          "defaultValue": "(date) => date.getDate()"
+        },
+        {
+          "name": "inlineProps",
+          "type": "CalendarMonthInlineProps",
+          "description": "Props used to ensure accessibility when displaying the calendar month inline."
+        },
+        {
+          "name": "isDateFocused",
+          "type": "boolean",
+          "description": "Flag to set browser focus on the passed date. *",
+          "defaultValue": "false"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "If using the default formatters which locale to use. Undefined defaults to current locale.\nSee https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "longWeekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in header for screen readers.",
+          "defaultValue": "(date) => date.toLocaleDateString(locale, { weekday: 'long' })"
+        },
+        {
+          "name": "monthAppendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The container to append the month select menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmonthAppendTo={() => document.body};\nmonthAppendTo={document.getElementById('target')}",
+          "defaultValue": "'inline'"
+        },
+        {
+          "name": "monthFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format months in month select.",
+          "defaultValue": "(date) => date.toLocaleDateString(locale, { month: 'long' })"
+        },
+        {
+          "name": "nextMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the next month button.",
+          "defaultValue": "'Next month'"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void",
+          "description": "Callback when date is selected.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onMonthChange",
+          "type": "(\n  event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>,\n  newDate?: Date\n) => void",
+          "description": "Callback when month or year is changed.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "prevMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the previous month button.",
+          "defaultValue": "'Previous month'"
+        },
+        {
+          "name": "rangeStart",
+          "type": "Date",
+          "description": "Which date to start range styles from."
+        },
+        {
+          "name": "validators",
+          "type": "((date: Date) => boolean)[]",
+          "description": "Functions that returns if a date is valid and selectable.",
+          "defaultValue": "[() => true]"
+        },
+        {
+          "name": "weekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format week days in header.",
+          "defaultValue": "(date) => date.toLocaleDateString(locale, { weekday: 'narrow' })"
+        },
+        {
+          "name": "weekStart",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday",
+          "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday.",
+          "defaultValue": "0"
+        },
+        {
+          "name": "yearInputAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the year input.",
+          "defaultValue": "'Select year'"
+        }
+      ]
+    },
+    {
+      "name": "CalendarFormat",
+      "description": "Additional properties that extend from and can be passed to the main component. These\nproperties allow customizing the calendar formatting and aria-labels.",
+      "props": [
+        {
+          "name": "cellAriaLabel",
+          "type": "(date: Date) => string",
+          "description": "Accessible label for the date cells."
+        },
+        {
+          "name": "dayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in buttons in table cells."
+        },
+        {
+          "name": "inlineProps",
+          "type": "CalendarMonthInlineProps",
+          "description": "Props used to ensure accessibility when displaying the calendar month inline."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "If using the default formatters which locale to use. Undefined defaults to current locale.\nSee https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation"
+        },
+        {
+          "name": "longWeekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in header for screen readers."
+        },
+        {
+          "name": "monthFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format months in month select."
+        },
+        {
+          "name": "nextMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the next month button."
+        },
+        {
+          "name": "prevMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the previous month button."
+        },
+        {
+          "name": "rangeStart",
+          "type": "Date",
+          "description": "Which date to start range styles from."
+        },
+        {
+          "name": "weekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format week days in header."
+        },
+        {
+          "name": "weekStart",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday",
+          "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday."
+        },
+        {
+          "name": "yearInputAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the year input."
+        }
+      ]
+    },
+    {
+      "name": "CalendarMonthInlineProps",
+      "description": "",
+      "props": [
+        {
+          "name": "ariaLabelledby",
+          "type": "string",
+          "description": "Id of the accessible label of the calendar month. Recommended to map to the title."
+        },
+        {
+          "name": "component",
+          "type": "keyof React.JSX.IntrinsicElements",
+          "description": "Component wrapping the calendar month when used inline. Recommended to be 'article'."
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-calendar-month"
+  ],
+  "examples": [
+    "Selectable date",
+    "Date range"
+  ]
+};
+pageData.liveContext = {
+  useState
+};
+pageData.examples = {
+  'Selectable date': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';\n\nexport const CalendarMonthSelectableDate: React.FunctionComponent = () => {\n  const [date, setDate] = useState(new Date(2020, 10, 24));\n\n  const onMonthChange = (\n    _event: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement> | undefined,\n    newDate: Date\n  ) => {\n    // eslint-disable-next-line no-console\n    console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);\n  };\n\n  const inlineProps: CalendarMonthInlineProps = {\n    component: 'article',\n    title: (\n      <Title headingLevel=\"h4\" id=\"favorite-date\">\n        Select your favorite date\n      </Title>\n    ),\n    ariaLabelledby: 'favorite-date'\n  };\n\n  return (\n    <>\n      <CalendarMonth\n        date={date}\n        onChange={(_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => setDate(date)}\n        onMonthChange={onMonthChange}\n        inlineProps={inlineProps}\n      />\n      <pre>Selected date: {date.toString()}</pre>\n    </>\n  );\n};\n","title":"Selectable date","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Date range': props => 
+    <Example {...pageData} {...props} {...{"code":"import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';\n\nexport const CalendarMonthDateRange: React.FunctionComponent = () => {\n  const startDate = new Date(2020, 10, 11);\n  const endDate = new Date(2020, 10, 24);\n  const disablePreStartDates = (date: Date) => date >= startDate;\n\n  const inlineProps: CalendarMonthInlineProps = {\n    component: 'article',\n    title: (\n      <Title id=\"display-range\" headingLevel=\"h4\">\n        Calendar month displaying a range\n      </Title>\n    ),\n    ariaLabelledby: 'display-range'\n  };\n\n  return (\n    <CalendarMonth\n      validators={[disablePreStartDates]}\n      date={endDate}\n      rangeStart={startDate}\n      inlineProps={inlineProps}\n    />\n  );\n};\n","title":"Date range","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In this example, there are 2 dates selected: a range start date (via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`rangeStart`}
+        </code>
+        {` prop) and a range end date (via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`date`}
+        </code>
+        {` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`validators`}
+        </code>
+        {` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`For this example, these dates are static and cannot be updated. For an interactive demo, see our `}
+        
+        <PatternflyThemeLink {...{"to":"/components/date-and-time/date-picker/react-demos","className":""}}>
+          {`Date picker demos`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Selectable date"])}
+    {React.createElement(pageData.examples["Date range"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDateAndTimeCalendarMonthReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/date-and-time/date-and-time-picker/react-demos.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
+import RhUiClockIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-icon';
+const pageData = {
+  "id": "Date and time picker",
+  "section": "components",
+  "subsection": "date-and-time",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/date-and-time/date-and-time-picker/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DateTimePicker.md",
+  "relPath": "packages/react-core/src/demos/DateTimePicker.md",
+  "examples": [
+    "Date and time picker",
+    "Date and time range picker"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  RhUiCalendarIcon,
+  RhUiClockIcon
+};
+pageData.examples = {
+  'Date and time picker': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  CalendarMonth,\n  InputGroup,\n  InputGroupItem,\n  TextInput,\n  Button,\n  Popover,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';\nimport RhUiClockIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-icon';\n\nexport const DateTimePicker: React.FunctionComponent = () => {\n  const [isCalendarOpen, setIsCalendarOpen] = useState(false);\n  const [isTimeOpen, setIsTimeOpen] = useState(false);\n  const [valueDate, setValueDate] = useState('MM-DD-YYYY');\n  const [valueTime, setValueTime] = useState('HH:MM');\n  const times = Array.from(new Array(10), (_, i) => i + 8);\n  const defaultTime = '0:00';\n  const dateFormat = (date: Date) =>\n    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\\//g, '-');\n\n  const onToggleCalendar = () => {\n    setIsCalendarOpen(!isCalendarOpen);\n    setIsTimeOpen(false);\n  };\n\n  const onToggleTime = () => {\n    setIsTimeOpen(!isTimeOpen);\n    setIsCalendarOpen(false);\n  };\n\n  const onSelectCalendar = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {\n    const newValue = dateFormat(newValueDate);\n    setValueDate(newValue);\n    setIsCalendarOpen(!isCalendarOpen);\n    // setting default time when it is not picked\n    if (valueTime === 'HH:MM') {\n      setValueTime(defaultTime);\n    }\n  };\n\n  const onSelectTime = (ev: React.MouseEvent<Element, MouseEvent> | undefined) => {\n    setValueTime(ev?.currentTarget?.textContent as string);\n    setIsTimeOpen(!isTimeOpen);\n  };\n\n  const timeOptions = times.map((time) => <DropdownItem key={time}>{`${time}:00`}</DropdownItem>);\n\n  const calendar = <CalendarMonth date={new Date(valueDate)} onChange={onSelectCalendar} />;\n\n  const time = (\n    <Dropdown\n      onSelect={onSelectTime}\n      isOpen={isTimeOpen}\n      onOpenChange={(isOpen: boolean) => setIsTimeOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          ref={toggleRef}\n          onClick={onToggleTime}\n          isExpanded={isTimeOpen}\n          aria-label=\"Time picker\"\n          icon={<RhUiClockIcon />}\n        />\n      )}\n    >\n      <DropdownList>{timeOptions}</DropdownList>\n    </Dropdown>\n  );\n\n  const calendarButton = (\n    <Button variant=\"control\" aria-label=\"Toggle the calendar\" onClick={onToggleCalendar} icon={<RhUiCalendarIcon />} />\n  );\n\n  return (\n    <div style={{ width: '300px' }}>\n      <Popover\n        position=\"bottom\"\n        bodyContent={calendar}\n        showClose={false}\n        isVisible={isCalendarOpen}\n        hasNoPadding\n        hasAutoWidth\n      >\n        <InputGroup>\n          <InputGroupItem>\n            <TextInput\n              type=\"text\"\n              id=\"date-time\"\n              aria-label=\"date and time picker demo\"\n              value={valueDate + ' ' + valueTime}\n              readOnlyVariant=\"default\"\n            />\n          </InputGroupItem>\n          <InputGroupItem>{calendarButton}</InputGroupItem>\n          <InputGroupItem>{time}</InputGroupItem>\n        </InputGroup>\n      </Popover>\n    </div>\n  );\n};\n","title":"Date and time picker","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Date and time range picker': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Flex,\n  FlexItem,\n  InputGroup,\n  InputGroupItem,\n  DatePicker,\n  isValidDate,\n  TimePicker,\n  yyyyMMddFormat\n} from '@patternfly/react-core';\n\nexport const DateTimeRangePicker: React.FunctionComponent = () => {\n  const [from, setFrom] = useState<Date | undefined>(undefined);\n  const [to, setTo] = useState<Date | undefined>(undefined);\n\n  const toValidator = (date: Date) =>\n    isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)\n      ? ''\n      : 'The \"to\" date must be after the \"from\" date';\n\n  const onFromDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newFromDate: Date) => {\n    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {\n      newFromDate.setHours(from.getHours());\n      newFromDate.setMinutes(from.getMinutes());\n    }\n    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {\n      setFrom(new Date(newFromDate));\n    }\n  };\n\n  const onFromTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {\n    if (isValidDate(from)) {\n      const updatedFromDate = new Date(from);\n      updatedFromDate.setHours(hour);\n      updatedFromDate.setMinutes(minute);\n      setFrom(updatedFromDate);\n    }\n  };\n\n  const onToDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newToDate: Date) => {\n    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {\n      newToDate.setHours(to.getHours());\n      newToDate.setMinutes(to.getMinutes());\n    }\n    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {\n      setTo(newToDate);\n    }\n  };\n\n  const onToTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {\n    if (isValidDate(to)) {\n      const updatedToDate = new Date(to);\n      updatedToDate.setHours(hour);\n      updatedToDate.setMinutes(minute);\n      setTo(updatedToDate);\n    }\n  };\n\n  return (\n    <Flex direction={{ default: 'column', lg: 'row' }}>\n      <FlexItem>\n        <InputGroup>\n          <InputGroupItem>\n            <DatePicker onChange={onFromDateChange} aria-label=\"Start date\" placeholder=\"YYYY-MM-DD\" />\n          </InputGroupItem>\n          <InputGroupItem>\n            <TimePicker aria-label=\"Start time\" style={{ width: '150px' }} onChange={onFromTimeChange} />\n          </InputGroupItem>\n        </InputGroup>\n      </FlexItem>\n      <FlexItem>to</FlexItem>\n      <FlexItem>\n        <InputGroup>\n          <InputGroupItem>\n            <DatePicker\n              value={isValidDate(to) ? yyyyMMddFormat(to) : to}\n              onChange={onToDateChange}\n              isDisabled={!isValidDate(from)}\n              rangeStart={from}\n              validators={[toValidator]}\n              aria-label=\"End date\"\n              placeholder=\"YYYY-MM-DD\"\n            />\n          </InputGroupItem>\n          <InputGroupItem>\n            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />\n          </InputGroupItem>\n        </InputGroup>\n      </FlexItem>\n    </Flex>\n  );\n};\n","title":"Date and time range picker","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`In this demo, learn how to use a `}
+      <PatternflyThemeLink {...{"to":"/components/date-and-time/calendar-month","className":""}}>
+        {`CalendarMonth`}
+      </PatternflyThemeLink>
+      {` component and a `}
+      <PatternflyThemeLink {...{"to":"/components/menus/dropdown","className":""}}>
+        {`Dropdown`}
+      </PatternflyThemeLink>
+      {` component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input.`}
+    </p>
+    {React.createElement(pageData.examples["Date and time picker"])}
+    {React.createElement(pageData.examples["Date and time range picker"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDateAndTimeDateAndTimePickerReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/date-and-time/date-picker/react-demos.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+const pageData = {
+  "id": "Date picker",
+  "section": "components",
+  "subsection": "date-and-time",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/date-and-time/date-picker/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DatePicker/DatePicker.md",
+  "relPath": "packages/react-core/src/demos/DatePicker/DatePicker.md",
+  "examples": [
+    "Date range picker",
+    "Date and time pickers in modal"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  ModalDeprecated,
+  ModalVariantDeprecated
+};
+pageData.examples = {
+  'Date range picker': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';\n\nexport const DatePickerRange: React.FunctionComponent = () => {\n  const [from, setFrom] = useState<Date | undefined>();\n  const [to, setTo] = useState<string>('');\n\n  const toValidator = (date: Date) =>\n    isValidDate(from) && date >= from ? '' : 'The \"to\" date must be after the \"from\" date';\n\n  const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {\n    setFrom(new Date(date));\n    if (isValidDate(date)) {\n      date.setDate(date.getDate() + 1);\n      setTo(yyyyMMddFormat(date));\n    } else {\n      setTo('');\n    }\n  };\n\n  const onToChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {\n    if (isValidDate(date)) {\n      setTo(yyyyMMddFormat(date));\n    }\n  };\n\n  return (\n    <Split>\n      <SplitItem>\n        <DatePicker onChange={onFromChange} aria-label=\"Start date\" placeholder=\"YYYY-MM-DD\" />\n      </SplitItem>\n      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>\n      <SplitItem>\n        <DatePicker\n          value={to}\n          onChange={onToChange}\n          isDisabled={!isValidDate(from)}\n          rangeStart={from}\n          validators={[toValidator]}\n          aria-label=\"End date\"\n          placeholder=\"YYYY-MM-DD\"\n        />\n      </SplitItem>\n    </Split>\n  );\n};\n","title":"Date range picker","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.`}
+      </p>
+    </Example>,
+  'Date and time pickers in modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  DatePicker,\n  Button,\n  TimePicker,\n  InputGroup,\n  InputGroupItem,\n  Modal,\n  ModalVariant,\n  ModalHeader,\n  ModalBody,\n  ModalFooter\n} from '@patternfly/react-core';\n\nexport const SimpleModal = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);\n  const dateRef = useRef(null);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  const onEscapePress = (event: KeyboardEvent) => {\n    if (dateRef && dateRef.current && dateRef.current.isCalendarOpen) {\n      dateRef.current.toggleCalendar(false, event.key);\n    } else if (isTimePickerOpen) {\n      setIsTimePickerOpen(false);\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Launch modal\n      </Button>\n      <Modal\n        id=\"date-time-picker-modal\"\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onEscapePress={onEscapePress}\n        onClose={handleModalToggle}\n      >\n        <ModalHeader title=\"Generic modal header\" />\n        <ModalBody>\n          <InputGroup>\n            <InputGroupItem>\n              <DatePicker ref={dateRef} appendTo={() => document.body} />\n            </InputGroupItem>\n            <InputGroupItem>\n              <TimePicker\n                menuAppendTo={() => document.body}\n                isOpen={isTimePickerOpen}\n                setIsOpen={setIsTimePickerOpen}\n              />\n            </InputGroupItem>\n          </InputGroup>\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Date and time pickers in modal","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Modals trap focus and watch a few document level events. In order to place a date picker in a modal:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`DatePickerRef`}
+          </code>
+          {` to close the calendar when it is open and the escape key is pressed.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually
+In order to place a time picker in the modal, its menu must be appended to the time picker's parent.`}
+        </li>
+        
+
+      </ul>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Date range picker"])}
+    {React.createElement(pageData.examples["Date and time pickers in modal"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDateAndTimeDatePickerReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;