React Migration in Datepicker Component

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

Properties

EJ2 React	React	Description
Props: `depth` `<DatePickerComponent id="DatePicker" depth='Month'/>`	Props: `depth` `<DatePicker depth={DatePickerView.Month} />`	Sets the maximum level of view such as `month`, `year`, and `decade` in the `DatePicker` . The `depth` view should be smaller than the start view to restrict navigation `depth`. In EJ2 React, this is specified as a string value (e.g., 'Month'), while in React it uses the typed enum `DatePicker View.Month` for better type safety.
Props: `showClearButton` `<DatePickerComponent id="DatePicker " showClearButton={true}/>`	Props: `clearButton` `<DatePicker clearButton={true} />`	The `showClearButton` property in EJ2 React has been renamed to `clearButton` in React. It specifies whether to show the clear button within the input field.
Props: `cssClass` `<DatePickerComponent cssClass='e-DatePicker '></DatePickerComponent>`	Props: `className` `<DatePicker className='sf-DatePicker '></DatePicker >`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `enabled` `<DatePickerComponent enabled={true}></DatePickerComponent>`	Props: `disabled` `<DatePicker disabled={true}></DatePicker >`	The `enabled` property in EJ2 React has been renamed to `disabled` in React. It specifies whether the component is disabled or not.
Props: `allowEdit` `<DatePickerComponent allowEdit={true}></DatePickerComponent>`	Props: `editable` `<DatePicker editable={true}></DatePicker >`	The `allowEdit` property in EJ2 React has been renamed to `editable` in React. It specifies whether the input field can be edited directly. When false, only allows selection via calendar.
Props: `format` `<DatePickerComponent format={'M/d/yyyy'}></DatePickerComponent>`	Props: `format` `<DatePicker format={'M/d/yyyy'}></DatePicker >`	The `format` prop is supported in both EJ2 React and React. It specifies the date format string for displaying and parsing date values. Examples: `'MM/dd/yyyy'`, `'yyyy-MM-dd'`, etc.
Props: `openOnFocus` `<DatePickerComponent openOnFocus={true}></DatePickerComponent>`	Props: `openOnFocus` `<DatePicker openOnFocus={type}></DatePicker >`	The `openOnFocus` prop is supported in both EJ2 React and React. It specifies whether the calendar should open when the input field gains focus.
Props: `placeholder` `<DatePickerComponent placeholder={'Select a date'}></DatePickerComponent>`	Props: `placeholder` `<DatePicker placeholder={'Select a date'}></DatePicker >`	The `placeholder` prop is supported in both EJ2 React and React. It specifies the placeholder text for the input field.
Props: `readOnly` `<DatePickerComponent readOnly={true}></DatePickerComponent>`	Props: `readOnly` `<DatePicker readOnly={type}></DatePicker >`	The `readOnly` prop is supported in both EJ2 React and React. It specifies whether the input field is read-only.
Props: `strictMode` `<DatePickerComponent strictMode={true}></DatePickerComponent>`	Props: `strictMode` `<DatePicker strictMode={type}></DatePicker >`	The `strictMode` prop is supported in both EJ2 React and React. It specifies whether the date should be strictly validated.
Props: `firstDayOfWeek` `<DatePickerComponent firstDayOfWeek={0}></DatePickerComponent>`	Props: `firstDayOfWeek` `<DatePicker firstDayOfWeek={0}></DatePicker >`	Specifies the `firstDayOfWeek` for the `DatePicker` . Values range from 0 (Sunday) to 6 (Saturday). By default, the `firstDayOfWeek` is determined by the current culture's regional settings. This property behaves consistently in both EJ2 React and React implementations.
Props: `max` `<DatePickerComponent max={new Date()}></DatePickerComponent>`	Props: `maxDate` `<DatePicker maxDate={new Date()}></DatePicker >`	The `max` property in EJ2 React has been renamed to `maxDate` in React. This change aligns with standard React naming conventions.The `max` property in EJ2 React `DatePicker`Component has been renamed to `maxDate` in React `DatePicker` .
Props: `min` `<DatePickerComponent min={new Date()}></DatePickerComponent>`	Props: `minDate` `<DatePicker minDate={new Date()}></DatePicker >`	The `min` property in EJ2 React has been renamed to `minDate` in React. This change aligns with standard React naming conventions.The `min` property in EJ2 React `DatePicker`Component has been renamed to `minDate` in React `DatePicker` .
Props: `showTodayButton` `<DatePickerComponent showTodayButton={true}></DatePickerComponent>`	Props: `showTodayButton` `<DatePicker showTodayButton={true}></DatePicker >`	The `showTodayButton` prop is supported in both EJ2 React and React. It specifies whether the today button is to be displayed or not.
Props: `start` `<DatePickerComponent start={new Date()}></DatePickerComponent>`	Props: `start` `<DatePicker start={new Date()}></DatePicker >`	The `start` prop is supported in both EJ2 React and React. It specifies the initial view of the DatePicker when it is opened.
Props: `zIndex` `<DatePickerComponent zIndex={100}></DatePickerComponent>`	Props: `zIndex` `<DatePicker zIndex={100}></DatePicker >`	The `zIndex` prop is supported in both EJ2 React and React. It sets the `zIndex` value for the dropdown popup, controlling its stacking order relative to other elements on the page.
Props: `dayHeaderFormat` `<DatePickerComponent dayHeaderFormat={'Narrow'}></DatePickerComponent>`	Props: `weekDaysFormat` `<DatePicker weekDaysFormat={'Narrow'}></DatePicker >`	The `dayHeaderFormat` property in EJ2 React has been renamed to `weekDaysFormat` in React. This property specifies the format of day names displayed in the DatePicker header. Supported formats include: `'Short' (Su)`, `'Narrow' (S)`, `'Abbreviated' (Sun)`, and `'Wide' (Sunday)`. The default format is `'Short'`. The default format is 'Short'.
Props: `weekNumber` `<DatePickerComponent weekNumber={true}></DatePickerComponent>`	Props: `weekNumber` `<DatePicker weekNumber={true}></DatePicker >`	The `weekNumber` prop is supported in both EJ2 React and React. It specifies whether the week number of the year is displayed in the DatePicker .
Props: `weekRule` `<DatePickerComponent weekRule={'FirstDay'}></DatePickerComponent>`	Props: `weekRule` `<DatePicker weekRule={WeekRule.FirstDay}></DatePicker >`	The `weekRule` prop is supported in both EJ2 React and React. It specifies the rule for defining the first week of the year.

Methods

EJ2 React	React	Description
Methods: `destroy` `<DatePickerComponent id="DatePicker" ref={(scope) => { this.DatePicker Obj = scope } /> constructor(props: {}) { this.DatePicker Obj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <DatePicker></DatePicker >`	The `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React `useEffect` hook to execute logic on component unmount.

Events

EJ2 React	React	Description
Events: `change` `<DatePickerComponent change={handler} > </DatePickerComponent>`	Events: `onChange` `<DatePicker onChange={handler}></DatePicker >`	The `change()` event handler in EJ2 React `DatePicker` has been renamed to `onChange()` in React.
Events: `navigated` `<DatePickerComponent navigated={handler} > </DatePickerComponent>`	Events: `onViewChange` `<DatePicker onViewChange={handler}></DatePicker >`	The `navigated()` event handler in EJ2 React `DatePicker` has been renamed to `onViewChange()` in React.
Events: `open` `<DatePickerComponent open={handler} > </DatePickerComponent>`	Events: `onOpen` `<DatePicker onOpen={handler}></DatePicker >`	The `open()` event handler in EJ2 React `DatePicker` has been renamed to `onOpen()` in React.
Events: `close` `<DatePickerComponent close={handler} > </DatePickerComponent>`	Events: `onClose` `<DatePicker onClose={handler}></DatePicker >`	The `close()` event handler in EJ2 React `DatePicker` has been renamed to `onClose()` in React.