feat(Timepicker): Add combined time column

apps/storybook/src/DatePicker.stories.tsx

@@ -120,6 +120,59 @@ WithTime.args = {
   showTime: true,
 };
 
+export const WithCombinedTime: Story<DatePickerProps> = (args) => {
+  const {
+    date = new Date(2021, 4, 11, 14, 55, 22),
+    setFocus = true,
+    showTime = true,
+    useCombinedRenderer = true,
+    use12Hours = true,
+    localizedNames,
+    ...rest
+  } = args;
+  const [opened, setOpened] = React.useState(false);
+  const [currentDate, setCurrentDate] = React.useState(date);
+  const onChange = (date: Date) => {
+    setCurrentDate(date);
+    action(`New date value: ${date}`, { clearOnStoryChange: false })();
+  };
+
+  React.useEffect(() => {
+    setCurrentDate(new Date(date));
+    return () => action('', { clearOnStoryChange: true })();
+  }, [date]);
+  return (
+    <>
+      <IconButton onClick={() => setOpened(!opened)} id='picker-button'>
+        <SvgCalendar />
+      </IconButton>
+      <span style={{ marginLeft: 16 }}>{currentDate.toString()}</span>
+      {opened && (
+        <div style={{ marginTop: 4 }}>
+          <DatePicker
+            {...rest}
+            date={currentDate}
+            onChange={onChange}
+            localizedNames={localizedNames}
+            setFocus={setFocus}
+            showTime={showTime}
+            useCombinedRenderer={useCombinedRenderer}
+            use12Hours={use12Hours}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+WithCombinedTime.args = {
+  date: new Date(2021, 4, 11, 14, 55, 22),
+  setFocus: true,
+  showTime: true,
+  useCombinedRenderer: true,
+  use12Hours: true,
+};
+
 export const Localized: Story<DatePickerProps> = (args) => {
   const {
     date = new Date(2021, 4, 11, 14, 55, 22),

apps/storybook/src/DatePicker.test.ts

@@ -4,7 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 describe('DatePicker', () => {
   const storyPath = 'Core/DatePicker';
-  const tests = ['Basic', 'Localized', 'With Time', 'With Year', 'Range'];
+  const tests = [
+    'Basic',
+    'Localized',
+    'With Time',
+    'With Combined Time',
+    'With Year',
+    'Range',
+  ];
 
   tests.forEach((testName) => {
     it(testName, function () {

apps/storybook/src/TimePicker.stories.tsx

@@ -22,14 +22,20 @@ export default {
     className: { control: { disable: true } },
     style: { control: { disable: true } },
     id: { control: { disable: true } },
-    date: { control: { type: 'date' } },
+    date: { control: 'date' },
+    precision: {
+      control: 'radio',
+      options: ['hours', 'minutes', 'seconds'],
+    },
   },
+  args: { use12Hours: false, precision: 'minutes' },
 } as Meta<TimePickerProps>;
 
 export const Basic: Story<TimePickerProps> = (args) => {
   const {
     date = new Date(2021, 4, 11, 14, 55, 22),
     setFocusHour = true,
+    use12Hours = false,
     ...rest
   } = args;
   const [opened, setOpened] = React.useState(false);
@@ -47,7 +53,7 @@ export const Basic: Story<TimePickerProps> = (args) => {
     <>
       <LabeledInput
         displayStyle='inline'
-        value={currentDate.toLocaleTimeString()}
+        value={currentDate.toLocaleTimeString('en-US', { timeStyle: 'short' })}
         svgIcon={
           <IconButton
             styleType='borderless'
@@ -61,14 +67,13 @@ export const Basic: Story<TimePickerProps> = (args) => {
         id='time-input'
       />
       {opened && (
-        <div>
-          <TimePicker
-            {...rest}
-            date={currentDate}
-            onChange={onChange}
-            setFocusHour={setFocusHour}
-          />
-        </div>
+        <TimePicker
+          {...rest}
+          date={currentDate}
+          onChange={onChange}
+          setFocusHour={setFocusHour}
+          use12Hours={use12Hours}
+        />
       )}
     </>
   );
@@ -77,11 +82,167 @@ export const Basic: Story<TimePickerProps> = (args) => {
 Basic.args = {
   date: new Date(2021, 4, 11, 14, 55, 22),
   setFocusHour: true,
-  hourRenderer: (date: Date) =>
-    date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }),
-  minuteRenderer: (date: Date) =>
-    date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }),
-  secondRenderer: (date: Date) =>
-    date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }),
-  meridiemRenderer: (meridiem: MeridiemType) => meridiem,
+};
+
+export const CustomRenderers: Story<TimePickerProps> = (args) => {
+  const {
+    date = new Date(2021, 4, 11, 14, 55, 22),
+    setFocusHour = true,
+    use12Hours = false,
+    hourRenderer = (date: Date) => (
+      <>
+        {date.getHours() === 1
+          ? `${date.getHours()} hr`
+          : `${date.getHours()} hrs`}
+      </>
+    ),
+    minuteRenderer = (date: Date) => (
+      <>
+        {date.getMinutes() === 1
+          ? `${date.getMinutes()} min`
+          : `${date.getMinutes()} mins`}
+      </>
+    ),
+    meridiemRenderer = (meridiem: MeridiemType) => (
+      <>{meridiem === 'AM' ? 'Before' : 'After'}</>
+    ),
+    ...rest
+  } = args;
+  const [opened, setOpened] = React.useState(false);
+  const [currentDate, setCurrentDate] = React.useState(new Date(date));
+  const onChange = (date: Date) => {
+    setCurrentDate(date);
+    action(`New Time value: ${date}`, { clearOnStoryChange: false })();
+  };
+
+  React.useEffect(() => {
+    setCurrentDate(new Date(date));
+    return () => action('', { clearOnStoryChange: true })();
+  }, [date]);
+  return (
+    <>
+      <LabeledInput
+        displayStyle='inline'
+        value={currentDate.toLocaleTimeString('en-US', { timeStyle: 'short' })}
+        svgIcon={
+          <IconButton
+            styleType='borderless'
+            onClick={() => setOpened((v) => !v)}
+          >
+            <SvgCalendar />
+          </IconButton>
+        }
+        style={{ width: 150 }}
+        readOnly
+        id='time-input'
+      />
+      {opened && (
+        <TimePicker
+          {...rest}
+          date={currentDate}
+          onChange={onChange}
+          setFocusHour={setFocusHour}
+          use12Hours={use12Hours}
+          hourRenderer={hourRenderer}
+          minuteRenderer={minuteRenderer}
+          meridiemRenderer={meridiemRenderer}
+        />
+      )}
+    </>
+  );
+};
+
+CustomRenderers.args = {
+  date: new Date(2021, 4, 11, 14, 55, 22),
+  setFocusHour: true,
+  hourRenderer: (date: Date) => (
+    <>
+      {date.getHours() === 1
+        ? `${date.getHours()} hr`
+        : `${date.getHours()} hrs`}
+    </>
+  ),
+  minuteRenderer: (date: Date) => (
+    <>
+      {date.getMinutes() === 1
+        ? `${date.getMinutes()} min`
+        : `${date.getMinutes()} mins`}
+    </>
+  ),
+  meridiemRenderer: (meridiem: MeridiemType) => (
+    <>{meridiem === 'AM' ? 'Before' : 'After'}</>
+  ),
+};
+
+export const Combined: Story<TimePickerProps> = (args) => {
+  const {
+    date = new Date(2021, 4, 11, 14, 55, 30),
+    setFocusHour = true,
+    precision = 'seconds',
+    hourStep = 1,
+    minuteStep = 1,
+    secondStep = 15,
+    use12Hours = true,
+    useCombinedRenderer = true,
+    ...rest
+  } = args;
+  const [opened, setOpened] = React.useState(false);
+  const [currentDate, setCurrentDate] = React.useState(new Date(date));
+  const onChange = (date: Date) => {
+    setCurrentDate(date);
+    action(`New Time value: ${date}`, { clearOnStoryChange: false })();
+  };
+
+  const inputValueType = precision === 'seconds' ? 'medium' : 'short';
+
+  React.useEffect(() => {
+    setCurrentDate(new Date(date));
+    return () => action('', { clearOnStoryChange: true })();
+  }, [date]);
+  return (
+    <>
+      <LabeledInput
+        displayStyle='inline'
+        value={currentDate.toLocaleTimeString('en-US', {
+          timeStyle: inputValueType,
+        })}
+        svgIcon={
+          <IconButton
+            styleType='borderless'
+            onClick={() => setOpened((v) => !v)}
+          >
+            <SvgCalendar />
+          </IconButton>
+        }
+        style={{ width: 150 }}
+        readOnly
+        id='time-input'
+      />
+      {opened && (
+        <TimePicker
+          {...rest}
+          date={currentDate}
+          onChange={onChange}
+          setFocusHour={setFocusHour}
+          useCombinedRenderer={useCombinedRenderer}
+          precision={precision}
+          hourStep={hourStep}
+          minuteStep={minuteStep}
+          secondStep={secondStep}
+          use12Hours={use12Hours}
+        />
+      )}
+    </>
+  );
+};
+
+Combined.args = {
+  date: new Date(2021, 4, 11, 14, 55, 30),
+  setFocusHour: true,
+  precision: 'seconds',
+  hourStep: 1,
+  minuteStep: 1,
+  secondStep: 15,
+  use12Hours: true,
+  useCombinedRenderer: true,
 };

apps/storybook/src/TimePicker.test.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 describe('TimePicker', () => {
   const storyPath = 'Core/TimePicker';
-  const tests = ['Basic'];
+  const tests = ['Basic', 'Custom Renderers', 'Combined'];
 
   tests.forEach((testName) => {
     it(testName, function () {

packages/iTwinUI-react/src/core/DatePicker/DatePicker.tsx

@@ -224,6 +224,12 @@ export const DatePicker = (props: DatePickerProps): JSX.Element => {
     hourStep,
     minuteStep,
     secondStep,
+    useCombinedRenderer,
+    combinedRenderer,
+    hourRenderer,
+    minuteRenderer,
+    secondRenderer,
+    meridiemRenderer,
     showYearSelection = false,
     enableRangeSelect = false,
     startDate,
@@ -619,6 +625,12 @@ export const DatePicker = (props: DatePickerProps): JSX.Element => {
           hourStep={hourStep}
           minuteStep={minuteStep}
           secondStep={secondStep}
+          useCombinedRenderer={useCombinedRenderer}
+          combinedRenderer={combinedRenderer}
+          hourRenderer={hourRenderer}
+          minuteRenderer={minuteRenderer}
+          secondRenderer={secondRenderer}
+          meridiemRenderer={meridiemRenderer}
           onChange={(date) =>
             isSingleOnChange(onChange, enableRangeSelect)
               ? onChange?.(date)