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 ReactReactDescription

Props: allowEdit

<DatePickerComponent allowEdit={true}></DatePickerComponent>

Props: editable

<DatePicker editable={true}></DatePicker>

The allowEdit prop in EJ2 React is replaced by editable in React.

Props: cssClass

<DatePickerComponent cssClass='e-DatePicker'></DatePickerComponent>

Props: className

<DatePicker className='sf-DatePicker'></DatePicker>

The cssClass prop in EJ2 React is replaced by className in React.

Props: dayHeaderFormat

<DatePickerComponent dayHeaderFormat={'Narrow'}></DatePickerComponent>

Props: weekDaysFormat

<DatePicker weekDaysFormat={'Narrow'}></DatePicker>

The dayHeaderFormat prop in EJ2 React is replaced by weekDaysFormat in React.

Props: depth

<DatePickerComponent depth='Month'/>

Props: depth

<DatePicker depth={CalendarView.Month} />

The depth prop is supported in both EJ2 React and React.

Props: enableRtl

<DatePickerComponent enableRtl={true}></DatePickerComponent>

Props: dir

<Provider dir='rtl'><DatePicker id="datePicker"></DatePicker></Provider>

The enableRtl prop in EJ2 React is replaced by dir in React.

Props: enabled

<DatePickerComponent enabled={true}></DatePickerComponent>

Props: disabled

<DatePicker disabled={true}></DatePicker>

The enabled prop in EJ2 React is replaced by disabled in React.

Props: firstDayOfWeek

<DatePickerComponent firstDayOfWeek={0}></DatePickerComponent>

Props: firstDayOfWeek

<DatePicker firstDayOfWeek={0}></DatePicker>

The firstDayOfWeek prop is supported in both EJ2 React and React.

Props: floatLabelType

<DatePickerComponent floatLabelType="Auto" placeholder="Enter date"></DatePickerComponent>

Props: labelMode

<DatePicker labelMode='Auto' placeholder="Enter date"></DatePicker>

The floatLabelType prop in EJ2 React is replaced by labelMode in React.

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.

Props: locale

<DatePickerComponent locale='en-US'></DatePickerComponent>

Props: locale

<Provider locale={'en-US'}> <DatePicker id="datePicker"></DatePicker> <Provider>

The locale prop in EJ2 React is replaced by locale provided via a Provider in React.

Props: max

<DatePickerComponent max={new Date()}></DatePickerComponent>

Props: maxDate

<DatePicker maxDate={new Date()}></DatePicker>

The max prop in EJ2 React is replaced by maxDate in React.

Props: min

<DatePickerComponent min={new Date()}></DatePickerComponent>

Props: minDate

<DatePicker minDate={new Date()}></DatePicker>

The min prop in EJ2 React is replaced by minDate in React.

Props: openOnFocus

<DatePickerComponent openOnFocus={true}></DatePickerComponent>

Props: openOnFocus

<DatePicker openOnFocus={true}></DatePicker>

The openOnFocus prop is supported in both EJ2 React and React.

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.

Props: readonly

<DatePickerComponent readonly={true}></DatePickerComponent>

Props: readOnly

<DatePicker readOnly={true}></DatePicker>

The readonly prop in EJ2 React is replaced by readOnly in React.

Props: showClearButton

<DatePickerComponent showClearButton={true}/>

Props: clearButton

<DatePicker clearButton={true} />

The showClearButton prop in EJ2 React is replaced by clearButton in React.

Props: showTodayButton

<DatePickerComponent showTodayButton={true}></DatePickerComponent>

Props: showTodayButton

<DatePicker showTodayButton={true}></DatePicker>

The showTodayButton prop is supported in both EJ2 React and React.

Props: strictMode

<DatePickerComponent strictMode={true}></DatePickerComponent>

Props: strictMode

<DatePicker strictMode={type}></DatePicker>

The strictMode prop is supported in both EJ2 React and React.

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.

Props: value

const [selectedValue, setSelectedValue] = useState<string>(null); const onchange = (args: ChangedEventArgs): void => { setSelectedValue(args.value.toLocaleDateString()); } <DatePickerComponent value={selectedValue} change={onchange}></DatePickerComponent>

Props: value

const [selectedDate, setSelectedDate] = useState(new Date(2025, 12, 15)); const handleChange = (args: CalendarChangeEvent) => { setSelectedDate(args.value as Date); } <DatePicker value={selectedDate} onChange={handleChange}></DatePicker>

The value prop is supported in both EJ2 React and React.

Props: weekNumber

<DatePickerComponent weekNumber={true}></DatePickerComponent>

Props: weekNumber

<DatePicker weekNumber={true}></DatePicker>

The weekNumber prop is supported in both EJ2 React and React.

Props: weekRule

<DatePickerComponent weekRule={'FirstDay'}></DatePickerComponent>

Props: weekRule

<DatePicker weekRule={WeekRule.FirstDay}></DatePicker>

The weekRule prop is supported in both EJ2 React and React.

Props: zIndex

<DatePickerComponent zIndex={100}></DatePickerComponent>

Props: zIndex

<DatePicker zIndex={100}></DatePicker>

The zIndex prop is supported in both EJ2 React and React.

Props: fullScreenMode

<DatePickerComponent fullScreenMode={true}></DatePickerComponent>

Props: pickerVariant

<DatePicker pickerVariant={PickerVariant.Auto}></DatePicker>

The fullScreenMode prop in EJ2 React is similar to pickerVariant in React.

Methods

EJ2 ReactReactDescription

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 destroy method in EJ2 React is replaced by unmount cleanup in React.

Events

EJ2 ReactReactDescription

Events: change

<DatePickerComponent change={handler} > </DatePickerComponent>

Events: onChange

<DatePicker onChange={handler}></DatePicker >

The change event in EJ2 React is replaced by onChange in React.

Events: close

<DatePickerComponent close={handler} > </DatePickerComponent>

Events: onClose

<DatePicker onClose={handler}></DatePicker >

The close event in EJ2 React is replaced by onClose in React.

Events: navigated

<DatePickerComponent navigated={handler} > </DatePickerComponent>

Events: onViewChange

<DatePicker onViewChange={handler}></DatePicker >

The navigated event in EJ2 React is replaced by onViewChange in React.

Events: open

<DatePickerComponent open={handler} > </DatePickerComponent>

Events: onOpen

<DatePicker onOpen={handler}></DatePicker >

The open event in EJ2 React is replaced by onOpen in React.

Events: renderDayCell

function disabledDate(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.isDisabled = true; } } <DatePickerComponent renderDayCell={disabledDate} > </DatePickerComponent>

Events: cellTemplate

const customCellTemplate = (props: CalendarCellProps) => { if (view === CalendarView.Month) { return ( <CalendarCell> <div className="sf-custom-cell"> <span className="sf-day">{date.getDate()}</span> </div> </CalendarCell> ); } return null; }; <DatePicker cellTemplate={customCellTemplate}></DatePicker>

The renderDayCell event in EJ2 React is replaced by cellTemplate in React.