Ej1 api migration in React Datepicker component

17 Mar 20256 minutes to read

This article describes the API migration process of DatePicker component from Essential® JS 1 to Essential® JS 2.

Date Selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Setting the value Property: value ``` ``` Property: value ``` ```

Date Format

Behavior API in Essential® JS 1 API in Essential® JS 2
Display the date format Property: dateFormat ``` ``` Property: format ``` ```
Day header format Property: dayHeaderFormat ``` ``` Not Applicable

Calendar Views

Behavior API in Essential® JS 1 API in Essential® JS 2
Start view Property: startLevel ``` ``` Property: start ``` ```
Depth view Property: depthLevel ``` ``` Property: depth ``` ```

Date Range

Behavior API in Essential® JS 1 API in Essential® JS 2
Minimum date Property: minDate ``` ``` Property: min ``` ```
Maximum date Property: maxDate ``` ``` Property: max ``` ```

Disabled Dates

Behavior API in Essential® JS 1 API in Essential® JS 2
Block-out dates Property: blackoutDates ``` var blackoutDates = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] <EJ.DatePicker id="timepicker" blackoutDates={blackoutDates} value="5/5/2016" ></EJ.DatePicker> ``` Can be achieved by ``` <DatePickerComponent id="datepicker" renderDayCell={this.disableDate.bind(this)}></DatePickerComponent> disableDate(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.isDisabled = true; } } ```

Customization

</table> ## Accessibility
Behavior API in Essential® JS 1 API in Essential® JS 2
CSS Class Property: cssClass ``` ``` Property: cssClass ``` ```
Event callback for each cell creation Not Applicable Event: renderDayCell ``` <DatePickerComponent id="datepicker" renderDayCell={this.onRenderCell.bind(this)}></DatePickerComponent> onRenderCell() {/** code block */} ```
Show/Hide the today button Property: showFooter ``` <EJ.DatePicker id="datepicker" showFooter={false} ></EJ.DatePicker> ``` Property: showTodayButton ``` <DatePickerComponent id="datepicker" showTodayButton ={false}></DatePickerComponent> ```
Show/Hide the other month dates Property: showOtherMonths ``` <EJ.DatePicker id="datepicker" showOtherMonths={false} ></EJ.DatePicker> ``` Can be achieved by ``` .e-datepicker .e-calendar .e-content tr.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month > .e-day { visibility: none; } .e-datepicker .e-calendar .e-content td.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month { pointer-events: none; touch-action: none; } ```
Show/Hide the disabled date Property: showDisabledRange ``` var blackoutDates = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] <EJ.DatePicker id="datepicker" showDisabledRange={false} blackoutDates={blackoutDates} ></EJ.DatePicker> ``` Not Applicable
Show/Hide the popup button Property: showPopupButton ``` <EJ.DatePicker id="datepicker" showPopupButton={false} ></EJ.DatePicker> ``` Event: Focus ``` <DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent> onFocus(args) { this.show(); } .e-control-wrapper .e-input-group-icon.e-date-icon { display: none; } ```
Enable/Disable the rounded corner Property: showRoundedCorner ``` <EJ.DatePicker id="datepicker" showRoundedCorner={true} ></EJ.DatePicker> ``` Can be achieved by ``` .e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group { border-radius: 4px; } ```
Skip a month Property: stepMonths ``` <EJ.DatePicker id="datepicker" stepMonths={3} ></EJ.DatePicker> ``` Can be achieved by ``` <DatePickerComponent id="datepicker" value='5/5/2019' open={this.onOpen.bind(this)}></DatePickerComponent> onOpen(args){ datepicker.navigateTo('Year', new Date("03/18/2028")); } ```
Show/Hide the tooltip Property: showTooltip ``` <EJ.DatePicker id="datepicker" showTooltip={false} ></EJ.DatePicker> ``` Not Applicable
Today button text Property: buttonText ``` ``` Can be achieved by ``` L10n.load({ 'de': { 'datepicker': { placeholder: 'Wählen Sie ein Datum aus', `today: 'heute' } } }); ```
Display Inline Property: displayInline ``` <EJ.DatePicker id="datepicker" displayInline={true} ></EJ.DatePicker> ``` Not Applicable
Enable/Disable the animation Property: enableAnimation ``` <EJ.DatePicker id="datepicker" enableAnimation={false} ></EJ.DatePicker> ``` Not Applicable
Highlight dates Property: highlightSection ``` ``` Can be achieved by ``` <DatePickerComponent id="datepicker" renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent> highlightDate(args) { if (args.date.getDate() === 10) { args.element.classList.add('e-highlightweekend'); } } .e-highlightweekend { background-color: #cfe9f3; } ```
Highlight weekend Property: highlightWeekend ``` <EJ.DatePicker id="datepicker" highlightWeekend={true} ></EJ.DatePicker> ``` Can be achieved by ``` <DatePickerComponent id="datepicker" renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent> highlightDate(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.element.classList.add('e-highlightweekend'); } } .e-highlightweekend { background-color: #cfe9f3; } ```
Tooltip format Property: tooltipFormat ``` ``` Not Applicable
Special dates Property: specialDates ``` var specialdate = [ { date: new Date(), tooltip: "In Australia" }] <EJ.DatePicker id="datepicker" specialDates={specialdate}></EJ.DatePicker> ``` Can be achieved by ``` <DatePickerComponent id="datepicker" renderDayCell={this.customDates} value='5/5/2017'></DatePickerComponent> customDates(args) { if (args.date.getDate() === 10) { var span = document.createElement('span'); span.setAttribute('class', 'e-icons highlight'); args.element.firstElementChild.setAttribute('title', 'Birthday !'); args.element.setAttribute('title', 'Birthday !'); args.element.setAttribute('data-val', 'Birthday !'); args.element.appendChild(span); } } ```
FocusIn event Event: focusIn ``` <EJ.DatePicker id="datepicker" focusIn={onFocus} ></EJ.DatePicker> function onFocus() { /** code block */ } ``` Event: focus ``` <DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent> onFocus() { /** code block */ } ```
FocusOut event Event: focusOut ``` <EJ.DatePicker id="datepicker" focusOut={onFocus} ></EJ.DatePicker> function onFocus() { /** code block */ } ``` Event: blur ``` <DatePickerComponent id="datepicker" blur={this.onBlur.bind(this)}></DatePickerComponent> onBlur() { /** code block */ } ```
FocusIn method Not Applicable Method: focusIn() ``` <DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent> create(args){ this.focusIn(); } ```
FocusOut method Not Applicable Method: focusOut() ``` <DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent> create(args){ this.focusIn(); this.focusOut(); } ```
Prevent popup close Not Applicable Event: Close ``` <DatePickerComponent id="datepicker" close={this.onClose.bind(this)}></DatePickerComponent> onClose(args) { /*Triggers when the popup gets close*/ args.cancel = true; } ```
Prevent popup open Not Applicable Event: Open ``` <DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent> onOpen(args) { /*Triggers when the popup gets close*/ args.cancel = true; } ```
Behavior API in Essential® JS 1 API in Essential® JS 2
Enable/Disable the RTL Property: enableRTL ``` <EJ.DatePicker id="datepicker" enableRTL={true} ></EJ.DatePicker> ``` Property: enableRtl ``` <DatePickerComponent id="datepicker" enableRtl={true}></DatePickerComponent> ```
## Persistence
Behavior API in Essential® JS 1 API in Essential® JS 2
Enable/Disable the persistence Property: enablePersistence ``` <EJ.DatePicker id="datepicker" enablePersistence={true} ></EJ.DatePicker> ``` Property: enablePersistence ``` <DatePickerComponent id="datepicker" enablePersistence={true}></DatePickerComponent> ```
## Validation
Behavior API in Essential® JS 1 API in Essential® JS 2
Validation rules Property: validationRules ``` var validationRules = {required: {true}}; $.validator.setDefaults({ errorClass: 'e-validation-error', errorPlacement: function (error, element) { $(error).insertAfter(element.closest(".e-widget")); } }); <EJ.DatePicker id="timepicker" validationRules= {validationRules} ></EJ.DatePicker> ``` Can be achieved by ``` var options = { rules: { 'datepicker': { required: true } } }; var formObject = new ej.inputs.FormValidator('#form-element', options); ```
Validation message Property: validationMessage ``` var validationRules = {required: {true}}; var validationMessage = {required: "Required value"}; $.validator.setDefaults({ errorClass: 'e-validation-error', errorPlacement: function (error, element) { $(error).insertAfter(element.closest(".e-widget")); } }); <EJ.DatePicker id="timepicker" validationRules= {validationRules} validationMessage= {validationMessage} ></EJ.DatePicker> ``` Can be achieved by ``` var options = { rules: { 'datepicker': { required: true } }, customPlacement: (inputElement, errorElement) => { inputElement.parentElement.parentElement.appendChild(errorElement); } var formObject = new ej.inputs.FormValidator('#form-element', options); ```
## Common </table> ## Globalization
Behavior API in Essential® JS 1 API in Essential® JS 2
Width Property: width ``` ``` Property: width ``` ```
Readonly Property: readonly ``` <EJ.DatePicker id="datepicker" readOnly={true} ></EJ.DatePicker> ``` Property: readonly ``` <DatePickerComponent id="datepicker" readonly={true}></DatePickerComponent> ```
Show/Hide the clear button Not Applicable Property: showClearButton ``` <DatePickerComponent id="datepicker" showClearButton={false}></DatePickerComponent> ```
Height Property: height ``` ``` Can be achieved by ``` .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { height: 35px; } ```
Html Attributes Property: HtmlAttributes ``` var htmlAttributes = {required:"required"} <EJ.TimePicker id="timepicker" htmlAttributes = {htmlAttributes} ></EJ.TimePicker> ``` Not Applicable
Enable/Disable the week number Property: weekNumber ``` <EJ.DatePicker id="datepicker" weekNumber={true} ></EJ.DatePicker> ``` Property: weekNumber ``` <DatePickerComponent id="datepicker" weekNumber={true}></DatePickerComponent> ```
Watermark text Property: watermarkText ``` <EJ.DatePicker id="datepicker" watermarkText="enter a date' ></EJ.DatePicker> ``` Property: placeholder ``` ```
Disable/Enable Property: enabled ``` <EJ.DatePicker id="datepicker" enabled={false}></EJ.DatePicker> ``` Property: enabled ``` <DatePickerComponent id="datepicker" enabled={false}></DatePickerComponent> ```
Disable the DatePicker Method: disable() ``` <EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker> function onCreate(args) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.disable(); } ``` Not Applicable
Enable the DatePicker Method: enable() ``` <EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker> function onCreate(args) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.enable(); } ``` Not Applicable
Enable/Disable the textBox editing Property: allowEdit ``` <EJ.DatePicker id="datepicker" allowEdit={true} ></EJ.DatePicker> ``` Property: allowEdit ``` <DatePickerComponent id="datepicker" allowEdit={false}></DatePickerComponent> ```
zIndex Not Applicable Property: zIndex ``` ```
Specify the placeholder text behavior Not Applicable Property: floatLabelType ``` ```
Behavior API in Essential® JS 1 API in Essential® JS 2
Locale Property: locale ``` ``` Property: locale ``` ```
First day of week Property: startDay ``` <EJ.DatePicker id="datepicker" startDay={3} ></EJ.DatePicker> ``` Property: firstDayOfWeek ``` <DatePickerComponent firstDayOfWeek={5}></DatePickerComponent> ```
## Strict Mode
Behavior API in Essential® JS 1 API in Essential® JS 2
Strict mode Property: enableStrictMode ``` <EJ.DatePicker id="datepicker" enableStrictMode={true} ></EJ.DatePicker> ``` Property: strictMode ``` <DatePickerComponent id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" strictMode={true}></DatePickerComponent> ```
## Open and Close
Behavior API in Essential® JS 1 API in Essential® JS 2
Close Event: Close ``` <EJ.DatePicker id="datepicker" close={onClose} ></EJ.DatePicker> function onClose() { /** code block */ } ``` Event: Close ``` <DatePickerComponent id="datepicker" close={this.onClose.bind(this)}></DatePickerComponent> onClose() { /** code block */ } ```
Hide Method: hide() ``` <EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker> function onCreate(args) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.show(); dateObject.hide(); } ``` Method: hide() ``` <DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent> onCreate(args){ this.show(); this.hide(); } ```
Open Event: Open ``` <EJ.DatePicker id="datepicker" open={onOpen} ></EJ.DatePicker> function onOpen() {/** code block */ } ``` Event: Open ``` <DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent> onOpen() {/** code block */ } ```
Show Method: show() ``` <EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker> function onCreate(args) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.show(); } ``` Method: show() ``` <DatePickerComponent id="datepicker" created={this.create.bind(this)} ></DatePickerComponent> create(args){ this.show(); } ```
## View Navigation
Behavior API in Essential® JS 1 API in Essential® JS 2
Navigate to specific month Not Applicable Method: navigateTo() ``` <DatePickerComponent id="datepicker" open={this.onOpen.bind(this)} ></DatePickerComponent> onOpen(args){ this.navigateTo('Year', new Date("03/18/2018")); } ```
Navigation callback Event: Navigate ``` <EJ.DatePicker id="datepicker" navigate={onNavigate} ></EJ.DatePicker> onNavigate() {/** code block */ } ``` Event: Navigated ``` <DatePickerComponent id="datepicker" navigated={this.onNavigated.bind(this)} ></DatePickerComponent> onNavigated() {/** code block */ } ```
Enable/Disable the drill down Property: allowDirllDown ``` <EJ.DatePicker id="datepicker" allowDirllDown={true} ></EJ.DatePicker> ``` Not Applicable