React Migration in DateTimePicker Component

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

Properties

EJ2 ReactReactDescription

Prop: allowEdit

<DateTimePickerComponent allowEdit={false} />

Prop: editable

<DateTimePicker editable={false} />

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

Prop: cssClass

<DateTimePickerComponent cssClass="custom" />

Prop: className

<DateTimePicker className="custom" />

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

Prop: enableRtl

<DateTimePickerComponent enableRtl={true} />

Provider: dir (via Provider)

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

The enableRtl prop in EJ2 React is replaced by using a Provider with dir="rtl" in React.

Prop: enabled

<DateTimePickerComponent enabled={false} />

Prop: disabled

<DateTimePicker disabled />

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

Prop: floatLabelType

<DateTimePickerComponent floatLabelType="Auto" />

Prop: labelMode

<DateTimePicker labelMode="Auto" />

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

Prop: format

<DateTimePickerComponent format="dd/MM/yyyy hh:mm" />

Prop: format

<DateTimePicker format="dd/MM/yyyy hh:mm" />

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

Prop: timeFormat

<DateTimePickerComponent timeFormat="hh:mm" />

Prop: format

<DateTimePicker format="hh:mm" />

The timeFormat prop in EJ2 React is replaced by format in React.

Prop: fullScreenMode

<DateTimePickerComponent fullScreenMode={true} />

Prop: pickerVariant

<DateTimePicker pickerVariant={PickerVariant.Auto} />

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

Prop: htmlAttributes

<DateTimePickerComponent htmlAttributes={{ placeholder: 'Pick' }} />

Prop: inputProps (pass attributes/style)

<DateTimePicker inputProps={{ placeholder: 'Pick' }} />

The htmlAttributes prop in EJ2 React is replaced by inputProps in React.

Prop: inputFormats

<DateTimePickerComponent inputFormats={['M/d/yyyy h:mm a']} />

Prop: inputFormats

<DateTimePicker inputFormats={['M/d/yyyy h:mm a']} />

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

Prop: firstDayOfWeek

<DateTimePickerComponent firstDayOfWeek={1} />

Prop: firstDayOfWeek

<DateTimePicker firstDayOfWeek={1} />

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

Prop: max

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

Prop: maxDate

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

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

Prop: min

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

Prop: minDate

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

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

Prop: maxTime

<DateTimePickerComponent maxTime={new Date()} />

Prop: maxTime

<DateTimePicker maxTime={new Date()} />

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

Prop: minTime

<DateTimePickerComponent minTime={null} />

Prop: minTime

<DateTimePicker minTime={null} />

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

Prop: openOnFocus

<DateTimePickerComponent openOnFocus={true} />

Prop: openOnFocus

<DateTimePicker openOnFocus={true} />

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

Prop: placeholder

<DateTimePickerComponent placeholder="Pick date" />

Prop: placeholder

<DateTimePicker placeholder="Pick date" />

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

Prop: readonly

<DateTimePickerComponent readonly={true} />

Prop: readOnly

<DateTimePicker readOnly={true} />

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

Prop: showClearButton

<DateTimePickerComponent showClearButton={true} />

Prop: clearButton

<DateTimePicker clearButton={true} />

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

Prop: depth

<DateTimePickerComponent depth="Year" />

Prop: depth
<DateTimePicker depth={CalendarView.Year} />``

The depth prop is supported in both EJ2 React and React (use CalendarView enum in React).

Prop: start

<DateTimePickerComponent start="Decade" />

Prop: start

<DateTimePicker start={CalendarView.Decade} />

The start prop is supported in both EJ2 React and React (use CalendarView enum in React).

Prop: step

<DateTimePickerComponent step={15} />

Prop: step

<DateTimePicker step={15} />

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

Prop: strictMode

<DateTimePickerComponent strictMode={true} />

Prop: strictMode

<DateTimePicker strictMode={true} />

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

Prop: value

<DateTimePickerComponent value={new Date()} />

Prop: value

<DateTimePicker value={new Date()} />

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

Prop: weekNumber

<DateTimePickerComponent weekNumber={true} />

Prop: weekNumber

<DateTimePicker weekNumber={true} />

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

Prop: weekRule

<DateTimePickerComponent weekRule="FirstDay" />

Prop: weekRule

<DateTimePicker weekRule={WeekRule.FirstDay} />

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

Prop: dayHeaderFormat

<DateTimePickerComponent dayHeaderFormat="Short" />

Prop: weekDaysFormat

<DateTimePicker weekDaysFormat="Short" />

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

Prop: width

<DateTimePickerComponent width="250px" />

Prop: style

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

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

Prop: zIndex

<DateTimePickerComponent zIndex={2000} />

Prop: zIndex

<DateTimePicker zIndex={2000} />

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

Events

EJ2 ReactReactDescription

Event: change

<DateTimePickerComponent change={(args) => {}} />

Event: onChange

const handleChange = (args) => { console.log('Value changed:', args); }; <DateTimePicker onChange={handleChange} />

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

Event: open

<DateTimePickerComponent open={() => {}} />

Event: onOpen

const handleOpen = () => { console.log('Popup opened'); }; <DateTimePicker onOpen={handleOpen} />

The open event in EJ2 React is replaced by onOpen in React and fires when the popup opens.

Event: close

<DateTimePickerComponent close={() => {}} />

Event: onClose

const handleClose = () => { console.log('Popup closed'); }; <DateTimePicker onClose={handleClose} />

The close event in EJ2 React is replaced by onClose in React and fires when the popup closes.

Event: navigated

<DateTimePickerComponent navigated={(args) => {}} />

Event: onViewChange

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

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

Event: renderDayCell

<DateTimePickerComponent renderDayCell={(args) => {}} />

Prop: cellTemplate (React node)

const cellTemplate = (date) => <div>{date.getDate()}</div>; <DateTimePicker cellTemplate={cellTemplate} />

The renderDayCell callback in EJ2 React is replaced by cellTemplate in React. Provide a React node/component for the template.