React Migration in TimePicker Component

This section explains how to migrate the TimePicker component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `allowEdit` `<TimePickerComponent allowEdit={true}></TimePickerComponent>`	Props: `editable` `<TimePicker editable={true}></TimePicker>`	The `allowEdit` prop in EJ2 React is replaced by `editable` in React.
Props: `cssClass` `<TimePickerComponent cssClass='e-TimePicker'></TimePickerComponent>`	Props: `className` `<TimePicker className='sf-TimePicker'></TimePicker>`	The `cssClass` prop in EJ2 React is replaced by `className` in React.
Props: `enableRtl` `<TimePickerComponent enableRtl={true}></TimePickerComponent>`	Props: `dir` `<Provider dir='rtl'><TimePicker id="TimePicker"></TimePicker></Provider>`	The `enableRtl` prop in EJ2 React is replaced by `dir` in React.
Props: `enabled` `<TimePickerComponent enabled={true}></TimePickerComponent>`	Props: `disabled` `<TimePicker disabled={true}></TimePicker>`	The `enabled` prop in EJ2 React is replaced by `disabled` in React.
Props: `floatLabelType` `<TimePickerComponent floatLabelType="Auto" placeholder="Select a time"></TimePickerComponent>`	Props: `labelMode` `<TimePicker labelMode='Auto' placeholder="Select a time"></TimePicker>`	The `floatLabelType` prop in EJ2 React is replaced by `labelMode` in React.
Props: `format` `<TimePickerComponent format={'HH:mm'}></TimePickerComponent>`	Props: `format` `<TimePicker format={'HH:mm'}></TimePicker>`	The `format` prop is supported in both EJ2 React and React.
Props: `locale` `<TimePickerComponent locale='en-US'></TimePickerComponent>`	Props: `locale` `<Provider locale={'en-US'}> <TimePicker id="TimePicker"></TimePicker> <Provider>`	The `locale` prop in EJ2 React is replaced by providing `locale` via a `Provider` in React.
Props: `max` `<TimePickerComponent max={new Date('8/3/2017 4:00 PM')}></TimePickerComponent>`	Props: `maxTime` `<TimePicker maxTime={new Date('8/3/2017 4:00 PM')}></TimePicker>`	The `max` prop in EJ2 React is replaced by `maxTime` in React.
Props: `min` `<TimePickerComponent min={new Date('8/3/2017 7:00 AM')}></TimePickerComponent>`	Props: `minTime` `<TimePicker minTime={new Date('8/3/2017 7:00 AM')}></TimePicker>`	The `min` prop in EJ2 React is replaced by `minTime` in React.
Props: `openOnFocus` `<TimePickerComponent openOnFocus={true}></TimePickerComponent>`	Props: `openOnFocus` `<TimePicker openOnFocus={true}></TimePicker>`	The `openOnFocus` prop is supported in both EJ2 React and React.
Props: `placeholder` `<TimePickerComponent placeholder={'Select a time'}></TimePickerComponent>`	Props: `placeholder` `<TimePicker placeholder={'Select a time'}></TimePicker>`	The `placeholder` prop is supported in both EJ2 React and React.
Props: `readOnly` `<TimePickerComponent readOnly={true}></TimePickerComponent>`	Props: `readOnly` `<TimePicker readOnly={true}></TimePicker>`	The `readOnly` prop is supported in both EJ2 React and React.
Props: `showClearButton` `<TimePickerComponent showClearButton={true}/>`	Props: `clearButton` `<TimePicker clearButton={true} />`	The `showClearButton` prop in EJ2 React is replaced by `clearButton` in React.
Props: `step` `<TimePickerComponent step={30}></TimePickerComponent>`	Props: `step` `<TimePicker step={30}></TimePicker>`	The `step` prop is supported in both EJ2 React and React.
Props: `strictMode` `<TimePickerComponent strictMode={true}></TimePickerComponent>`	Props: `strictMode` `<TimePicker strictMode={type}></TimePicker>`	The `strictMode` prop is supported in both EJ2 React and React.
Props: `value` `const [selectedValue, setSelectedValue] = useState<string>(null); const onchange = (args: ChangedEventArgs): void => { setSelectedValue(args.value.toLocaleDateString()); } <TimePickerComponent value={selectedValue} change={onchange}></TimePickerComponent>`	Props: `value` `const [minBoth, setMinBoth] = useState<Date \| null>(makeTime(9, 0)); <TimePicker value={minBoth} onChange={(e) => setMinBoth(e.value)}></TimePicker>`	The `value` prop is supported in both EJ2 React and React.
Props: `zIndex` `<TimePickerComponent zIndex={1000}></TimePickerComponent>`	Props: `zIndex` `<TimePicker zIndex={1000}></TimePicker>`	The `zIndex` prop is supported in both EJ2 React and React.
Props: `fullScreenMode` `<TimePickerComponent fullScreenMode={true}></TimePickerComponent>`	Props: `fullScreenMode` `<TimePicker fullScreenMode={true}></TimePicker>`	The `fullScreenMode` prop is supported in both EJ2 React and React.

Methods

EJ2 React	React	Description
Methods: `destroy` `<TimePickerComponent id="TimePicker" ref={(scope) => { this.TimePicker Obj = scope } /> constructor(props: {}) { this.TimePicker Obj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <TimePicker></TimePicker >`	The `destroy` method in EJ2 React is replaced by React's useEffect cleanup function.

Events

EJ2 React	React	Description
Events: `change` `<TimePickerComponent change={handler} > </TimePickerComponent>`	Events: `onChange` `<TimePicker onChange={handler}></TimePicker >`	The `change` event in EJ2 React is replaced by `onChange` in React.
Events: `open` `<TimePickerComponent open={handler} > </TimePickerComponent>`	Events: `onOpen` `<TimePicker onOpen={handler}></TimePicker >`	The `open` event in EJ2 React is replaced by `onOpen` in React.
Events: `close` `<TimePickerComponent close={handler} > </TimePickerComponent>`	Events: `onClose` `<TimePicker onClose={handler}></TimePicker >`	The `close` event in EJ2 React is replaced by `onClose` in React.