React Migration in DateRangePicker Component

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

Properties

EJ2 ReactReactDescription

Props: allowEdit

<DateRangePickerComponent allowEdit={false}></DateRangePickerComponent>

Props: editable

<DateRangePicker editable={false}></DateRangePicker>

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

Props: cssClass

<DateRangePickerComponent cssClass="custom-range"></DateRangePickerComponent>

Props: className

<DateRangePicker className="custom-range"></DateRangePicker>

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

Props: dayHeaderFormat

<DateRangePickerComponent dayHeaderFormat="Short"></DateRangePickerComponent>

Props: weekDaysFormat

<DateRangePicker weekDaysFormat="Short"></DateRangePicker>

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

Props: depth

<DateRangePickerComponent depth="Month"></DateRangePickerComponent>

Props: depth

<DateRangePicker depth="Month"></DateRangePicker>

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

Props: enableRtl

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

Props: dir (via Provider)

<Provider dir="rtl"> <DateRangePicker></DateRangePicker> </Provider>

The enableRtl prop in EJ2 React is supplied via dir="rtl" on a Provider in React.

Props: enabled

<DateRangePickerComponent enabled={false}></DateRangePickerComponent>

Props: disabled

<DateRangePicker disabled></DateRangePicker>

The enabled prop in EJ2 React is inverted as disabled in React.

Props: startDate

<DateRangePickerComponent startDate={new Date()}></DateRangePickerComponent>

Props: defaultValue

<DateRangePicker defaultValue={[new Date(2025, 0, 10), new Date(2025, 0, 20)]}></DateRangePicker>

The startDate prop in EJ2 React is replaced by the defaultValue in React.

Props: endDate

<DateRangePickerComponent endDate={new Date()}></DateRangePickerComponent>

Props: defaultValue

<DateRangePicker defaultValue={[new Date(2025, 0, 10), new Date(2025, 0, 20)]}></DateRangePicker>

The endDate prop in EJ2 React is replaced by the defaultValue prop in React.

Props: firstDayOfWeek

<DateRangePickerComponent firstDayOfWeek={1}></DateRangePickerComponent>

Props: firstDayOfWeek

<DateRangePicker firstDayOfWeek={1}></DateRangePicker>

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

Props: floatLabelType

<DateRangePickerComponent floatLabelType="Auto"></DateRangePickerComponent>

Props: labelMode

<DateRangePicker labelMode="Auto"></DateRangePicker>

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

Props: format

<DateRangePickerComponent format="MM/dd/yyyy"></DateRangePickerComponent>

Props: format

<DateRangePicker format="MM/dd/yyyy"></DateRangePicker>

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

Props: fullScreenMode

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

Props: pickerVariant

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

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

Props: inputFormats

<DateRangePickerComponent inputFormats={['M/d/yyyy']}></DateRangePickerComponent>

Props: inputFormats

<DateRangePicker inputFormats={['M/d/yyyy']}></DateRangePicker>

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

Props: locale

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

Props: locale (via Provider)

<Provider locale="en-US"> <DateRangePicker></DateRangePicker> </Provider>

The locale prop in EJ2 React is supplied via a Provider in React.

Props: max

<DateRangePickerComponent max={new Date(2099,11,31)}></DateRangePickerComponent>

Props: maxDate

<DateRangePicker maxDate={new Date(2099,11,31)}></DateRangePicker>

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

Props: maxDays

<DateRangePickerComponent maxDays={30}></DateRangePickerComponent>

Props: maxRangeDays

<DateRangePicker maxRangeDays={30}></DateRangePicker>

The maxDays prop in EJ2 React is replaced by maxRangeDays in React.

Props: min

<DateRangePickerComponent min={new Date(1900,0,1)}></DateRangePickerComponent>

Props: minDate

<DateRangePicker minDate={new Date(1900,0,1)}></DateRangePicker>

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

Props: minDays

<DateRangePickerComponent minDays={1}></DateRangePickerComponent>

Props: minRangeDays

<DateRangePicker minRangeDays={1}></DateRangePicker>

The minDays prop in EJ2 React is replaced by minRangeDays in React.

Props: openOnFocus

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

Props: openOnFocus

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

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

Props: placeholder

<DateRangePickerComponent placeholder="Select range"></DateRangePickerComponent>

Props: placeholder

<DateRangePicker placeholder="Select range"></DateRangePicker>

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

Props: presets

<DateRangePickerComponent presets={[{ label: 'Today', start: new Date(), end: new Date() }]}></DateRangePickerComponent>

Props: presets

<DateRangePicker presets={[{ label: 'Today', start: new Date(), end: new Date() }]}></DateRangePicker>

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

Props: readonly

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

Props: readOnly

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

The readonly prop in EJ2 React is readOnly in React.

Props: separator

<DateRangePickerComponent separator="-"></DateRangePickerComponent>

Props: separator

<DateRangePicker separator=" - "></DateRangePicker>

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

Props: showClearButton

<DateRangePickerComponent showClearButton={true}></DateRangePickerComponent>

Props: clearButton

<DateRangePicker clearButton={true}></DateRangePicker>

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

Props: start

<DateRangePickerComponent start="Month"></DateRangePickerComponent>

Props: start

<DateRangePicker start="Month"></DateRangePicker>

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

Props: strictMode

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

Props: strictMode

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

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

Props: value

<DateRangePickerComponent value={[new Date(), new Date()]}></DateRangePickerComponent>

Props: value

<DateRangePicker value={[new Date(), new Date()]}></DateRangePicker>

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

Props: weekNumber

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

Props: weekNumber

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

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

Props: weekRule

<DateRangePickerComponent weekRule="FirstDay"></DateRangePickerComponent>

Props: weekRule

<DateRangePicker weekRule="FirstDay"></DateRangePicker>

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

Props: zIndex

<DateRangePickerComponent zIndex={1000}></DateRangePickerComponent>

Props: zIndex

<DateRangePicker zIndex={1000}></DateRangePicker>

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

Prop: width

<DateRangePickerComponent width="250px" />

Prop: style

<DateRangePicker style={{ width: '250px' }} />

The width prop in EJ2 React is replaced by style in React.

Events

EJ2 ReactReactDescription

Event: change

const handleChange = (args) => { console.log('Range changed:', args.value); }; <DateRangePickerComponent change={handleChange}></DateRangePickerComponent>

Event: onChange

const handleChange = (value) => { console.log('Range changed:', value); }; <DateRangePicker onChange={handleChange}></DateRangePicker>

The change event in EJ2 React is replaced by onChange in React and fires on value change.

Event: select

const handleSelect = (args) => { console.log('Item selected:', args); }; <DateRangePickerComponent select={handleSelect}></DateRangePickerComponent>

Event: onChange

const handleSelect = (value) => { console.log('Item selected:', value); }; <DateRangePicker onChange={handleSelect}></DateRangePicker>

The select event in EJ2 React is replaced by onChange in React and fires when an item (start/end) is chosen.

Event: navigated

const handleNavigated = (args) => { console.log('Navigated'); }; <DateRangePickerComponent navigated={handleNavigated}></DateRangePickerComponent>

Event: onViewChange

const handleViewChange = (event) => { console.log('View changed'); }; <DateRangePicker onViewChange={handleViewChange}></DateRangePicker>

The navigated event in EJ2 React is replaced by onViewChange in React and fires when the calendar view changes.

Event: open

const handleOpen = (args) => { console.log('Opened'); }; <DateRangePickerComponent open={handleOpen}></DateRangePickerComponent>

Event: onOpen

const handleOpen = () => { console.log('Opened'); }; <DateRangePicker onOpen={handleOpen}></DateRangePicker>

The open event in EJ2 React is replaced by onOpen in React and fires on popup open.

Event: close

const handleClose = (args) => { console.log('Closed'); }; <DateRangePickerComponent close={handleClose}></DateRangePickerComponent>

Event: onClose

const handleClose = () => { console.log('Closed'); }; <DateRangePicker onClose={handleClose}></DateRangePicker>

The close event in EJ2 React is replaced by onClose in React and fires on popup close.

Event: renderDayCell

const handleRender = (args) => { /* modify cell */ }; <DateRangePickerComponent renderDayCell={handleRender}></DateRangePickerComponent>

Props: cellTemplate

const Cell = () => <div></div>; <DateRangePicker cellTemplate={<Cell />}></DateRangePicker>

The renderDayCell event in EJ2 React is replaced by the cellTemplate prop in React for customizing cell rendering.