#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates

packages/react-examples/src/react/TimePicker/TimePicker.Example.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { ITimeRange, TimePicker } from '@fluentui/react/lib/TimePicker';
-import { IStackTokens, Stack, IStackStyles, IComboBoxStyles, IComboBox } from '@fluentui/react';
+import { IStackTokens, Stack, IStackStyles } from '@fluentui/react/lib/Stack';
+import { IComboBoxStyles } from '@fluentui/react/lib/ComboBox';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+import { Label } from '@fluentui/react/lib/Label';
+import { Text } from '@fluentui/react/lib/Text';
 
 const stackStyles: Partial<IStackStyles> = { root: { maxWidth: 300 } };
 const stackTokens: IStackTokens = { childrenGap: 20 };
@@ -15,46 +19,72 @@ const timePickerStyles: Partial<IComboBoxStyles> = {
 };
 
 const onFormatDate = (date: Date) => `Custom prefix + ${date.toLocaleTimeString()}`;
-const onChange = (_: React.FormEvent<IComboBox>, date: Date) => console.log('SELECTED DATE: ', date);
+const onTimeChange = (date: Date) => console.log('SELECTED DATE: ', date);
 
 export const TimePickerBasicExample: React.FC = () => {
+  const [datePickerDate, setDatePickerDate] = React.useState<Date>();
+  const [currentTimeString, setCurrentTimeString] = React.useState<string>('');
+
+  const onSelectDate = React.useCallback((selectedDate: Date) => {
+    setDatePickerDate(selectedDate);
+  }, []);
+
+  const onDateTimePickerChange = React.useCallback((time: Date) => {
+    setCurrentTimeString(time.toString());
+  }, []);
+
   const timeRange: ITimeRange = {
     start: 8,
     end: 14,
   };
 
   return (
-    <Stack tokens={stackTokens} styles={stackStyles}>
-      <TimePicker
-        styles={timePickerStyles}
-        useHour12
-        allowFreeform
-        autoComplete="on"
-        label={'TimePicker basic example'}
-        onChange={onChange}
-        defaultValue={new Date('November 25, 2021 09:15:00')}
-        useComboBoxAsMenuWidth
-      />
-      <TimePicker
-        styles={timePickerStyles}
-        showSeconds
-        allowFreeform
-        increments={15}
-        autoComplete="on"
-        label={'TimePicker with non default options'}
-        useComboBoxAsMenuWidth
-        timeRange={timeRange}
-        onChange={onChange}
-      />
-      <TimePicker
-        styles={timePickerStyles}
-        // eslint-disable-next-line react/jsx-no-bind
-        onFormatDate={onFormatDate}
-        useHour12
-        allowFreeform
-        autoComplete="on"
-        label={'TimePicker with custom time string'}
-      />
-    </Stack>
+    <>
+      <Stack tokens={stackTokens} styles={stackStyles}>
+        <TimePicker
+          styles={timePickerStyles}
+          useHour12
+          allowFreeform
+          autoComplete="on"
+          label={'TimePicker basic example'}
+          onTimeChange={onTimeChange}
+          currentDate={new Date('November 25, 2021 09:15:00')}
+          useComboBoxAsMenuWidth
+        />
+        <TimePicker
+          styles={timePickerStyles}
+          showSeconds
+          allowFreeform
+          increments={15}
+          autoComplete="on"
+          label={'TimePicker with non default options'}
+          useComboBoxAsMenuWidth
+          timeRange={timeRange}
+          onTimeChange={onTimeChange}
+        />
+        <TimePicker
+          styles={timePickerStyles}
+          // eslint-disable-next-line react/jsx-no-bind
+          onFormatDate={onFormatDate}
+          useHour12
+          allowFreeform
+          autoComplete="on"
+          label={'TimePicker with custom time string'}
+        />
+      </Stack>
+      <div style={{ paddingTop: '20px', maxWidth: '50%' }}>
+        <Label>{'DatePicker and TimePicker combination'}</Label>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridColumnGap: '3px' }}>
+          <DatePicker
+            placeholder="Select a date..."
+            value={datePickerDate}
+            onSelectDate={onSelectDate}
+            minDate={new Date()}
+          />
+          <TimePicker currentDate={datePickerDate} useComboBoxAsMenuWidth onTimeChange={onDateTimePickerChange} />
+        </div>
+        <Text>{`TimePicker selected time: ${currentTimeString}`}</Text>
+      </div>
+    </>
   );
 };

packages/react/src/components/TimePicker/TimePicker.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useConst } from '@fluentui/react-hooks';
 import { KeyCodes } from '../../Utilities';
 import {
   TimeConstants,
@@ -24,9 +23,11 @@ const getDefaultStrings = (useHour12: boolean, showSeconds: boolean): ITimePicke
   const hourUnits = useHour12 ? '12-hour' : '24-hour';
   const timeFormat = `hh:mm${showSeconds ? ':ss' : ''}${useHour12 ? ' AP' : ''}`;
   const errorMessageToDisplay = `Enter a valid time in the ${hourUnits} format: ${timeFormat}`;
+  const defaultTimePickerPlaceholder = `Enter or select a time`;
 
   return {
     invalidInputErrorMessage: errorMessageToDisplay,
+    defaultTimePickerPlaceholder,
   };
 };
 
@@ -41,23 +42,31 @@ export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
   useHour12 = false,
   timeRange,
   strings = getDefaultStrings(useHour12, showSeconds),
-  defaultValue,
-  onChange,
+  currentDate,
+  onTimeChange,
   onFormatDate,
   onValidateUserInput,
+  placeholder = strings.defaultTimePickerPlaceholder,
   ...rest
 }: ITimePickerProps) => {
   const [userText, setUserText] = React.useState<string>('');
+  const [selectedKey, setSelectedKey] = React.useState<string | number | undefined>();
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const optionsCount = getDropdownOptionsCount(increments, timeRange);
 
-  const initialValue = useConst(defaultValue || new Date());
-  const baseDate: Date = React.useMemo(() => generateBaseDate(increments, timeRange, initialValue), [
-    increments,
-    timeRange,
-    initialValue,
-  ]);
+  const baseDate = React.useMemo(() => {
+    const initialDate = currentDate || new Date();
+    return generateBaseDate(increments, timeRange, initialDate);
+  }, [increments, timeRange, currentDate]);
+
+  React.useEffect(() => {
+    if (onTimeChange && !errorMessage && userText) {
+      const currentChosenTime = userText;
+      const date = getDateFromTimeSelection(useHour12, currentDate, currentChosenTime);
+      onTimeChange(date);
+    }
+  }, [currentDate]);
 
   const timePickerOptions: IComboBoxOption[] = React.useMemo(() => {
     const optionsList = Array(optionsCount);
@@ -76,10 +85,8 @@ export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
     });
   }, [baseDate, increments, optionsCount, showSeconds, onFormatDate, useHour12]);
 
-  const [selectedKey, setSelectedKey] = React.useState<string | number | undefined>(timePickerOptions[0].key);
-
   const onInputChange = React.useCallback(
-    (event: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string): void => {
+    (_: React.FormEvent<IComboBox>, option?: IComboBoxOption, _index?: number, value?: string): void => {
       const validateUserInput = (userInput: string): string => {
         let errorMessageToDisplay = '';
         let regex: RegExp;
@@ -114,10 +121,10 @@ export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
         updatedUserText = option.text;
       }
 
-      if (onChange && !errorMessageToDisplay) {
+      if (onTimeChange && !errorMessageToDisplay) {
         const selectedTime = value || option?.text || '';
         const date = getDateFromTimeSelection(useHour12, baseDate, selectedTime);
-        onChange(event, date);
+        onTimeChange(date);
       }
 
       setErrorMessage(errorMessageToDisplay);
@@ -127,7 +134,7 @@ export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
     [
       baseDate,
       allowFreeform,
-      onChange,
+      onTimeChange,
       onFormatDate,
       onValidateUserInput,
       showSeconds,
@@ -157,6 +164,7 @@ export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
   return (
     <ComboBox
       {...rest}
+      placeholder={placeholder}
       allowFreeform={allowFreeform}
       selectedKey={selectedKey}
       label={label}

packages/react/src/components/TimePicker/TimePicker.types.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import type { IComboBox, IComboBoxProps } from '../../ComboBox';
+import type { IComboBoxProps } from '../../ComboBox';
 
 /**
  * {@docCategory TimePicker}
@@ -20,16 +19,15 @@ export interface ITimeRange {
 export interface ITimePickerStrings {
   /** Error message to render below the field if input parsing fails. */
   invalidInputErrorMessage: string;
+  /** Default placeholder text to render within ComboBox if no placeholder is provided. */
+  defaultTimePickerPlaceholder: string;
 }
 
 /**
  * {@docCategory TimePicker}
  */
 export interface ITimePickerProps
-  extends Omit<
-    IComboBoxProps,
-    'options' | 'selectedKey' | 'defaultSelectedKey' | 'multiSelect' | 'text' | 'defaultValue' | 'onChange'
-  > {
+  extends Omit<IComboBoxProps, 'options' | 'selectedKey' | 'defaultSelectedKey' | 'multiSelect' | 'text' | 'onChange'> {
   /**
    * Label of the component
    */
@@ -70,14 +68,14 @@ export interface ITimePickerProps
   strings?: ITimePickerStrings;
 
   /**
-   * Default value of the TimePicker, if any
+   * Controlled current date for the TimePicker, if any
    */
-  defaultValue?: Date;
+  currentDate?: Date;
 
   /**
    * Callback issued when the time is changed
    */
-  onChange?: (event: React.FormEvent<IComboBox>, time: Date) => void;
+  onTimeChange?: (time: Date) => void;
 
   /**
    * Callback to localize the date strings displayed for dropdown options