Ej1 api migration in React Daterangepicker component

24 Jan 20234 minutes to read

This article describes the API migration process of DateRangePicker 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 ``` this.value = [new Date('1/15/2017'), new Date("1/15/2017")]; <DateRangePickerComponent id="daterangepicker" value={this.value} ></DateRangePickerComponent> ```

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format Property: dateFormat ``` ``` Property: format ``` ```

Date Range

</tr> </thead> </table> ## Disabled Dates
Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: minDate ``` ``` Property: min ``` ```
Maximum date Property: maxDate ``` ```` Property: max ``` ```
Start date Property: startDate ``` ``` Property: startDate ``` ```
End date Property: endDate ``` ``` Property: endDate ``` <DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" endDate="8/8/2019 ></DateRangePickerComponent> ```
Preset ranges Property: ranges ``` var ranges = [{ label: "Today", range: [new Date(), new Date()] },{ label: "Last Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] }] <EJ.DateRangePicker id="timepicker" ranges={ranges}></EJ.DateRangePicker> ``` Property: presets ``` this.weekStart = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString()); this.weekEnd = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate() - (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString()); <PresetDirective label="This Week" start={this.weekStart} end={this.weekEnd}> </PresetDirective> ```
Add ranges Method: addRanges() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.addRanges("new Range", [new Date("11/12/2019"), new Date("11/12/2021")]); } ``` Not Applicable
Clear ranges Method: clearRanges() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.clearRanges(); } ``` Not Applicable
Get selected range Method: getSelectedRange() ``` <EJ.DateRangePicker id="daterangepicker" startDate="5/5/2019" endDate="8/8/2019" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var dateObj = $("#daterangepicker").data("ejDateRangePicker"); console.log(dateObj.getSelectedRange()); } ``` Method: getSelectedRange() ``` <DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" endDate="8/8/2019" created ={this.onCreate.bind(this)} ></DateRangePickerComponent> onCreate (args) { console.log(this.getSelectedRange()); } ```
Set date range Method: setRange() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]); } ``` Not Applicable
Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates Not Applicable Can be achieved by ``` <DateRangePickerComponent id="daterangepicker" renderDayCell={this.disableDaterange.bind(this)}></DateRangePickerComponent> disableDaterange(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.isDisabled = true; } } ```
## Customization
Behavior API in Essential JS 1 API in Essential JS 2
CSS Class Property: cssClass ``` ``` Property: cssClass ``` ```
Enable/Disable TimePicker with DateRangePicker Property: enableTimePicker ``` <EJ.DateRangePicker id="daterangepicker" enableTimePicker={true} ></EJ.DateRangePicker> ``` Not Applicable
Time format Property: timeFormat ``` ``` Not Applicable
Minimum days span Not Applicable Property: minDays ``` <DateRangePickerComponent id="daterangepicker" minDays={5}></DateRangePickerComponent> ```
Maximum days span Not Applicable Property: maxDays ``` <DateRangePickerComponent id="daterangepicker" maxDays={5}></DateRangePickerComponent> ```
Button text Property: buttonText ``` var buttonText = { reset: "Again", cancel: "Cut", apply: "Ok" } <EJ.DateRangePicker id="timepicker" buttonText={buttonText}></EJ.DateRangePicker> ``` Can be achieved by ``` L10n.load({ 'en': { 'daterangepicker': { applyText: 'Apply' } } }); ```
Show/Hide the popup button Property: showPopupButton ``` <EJ.DateRangePicker id="daterangepicker" showPopupButton={false} ></EJ.DateRangePicker> ``` Event: focus ``` <DateRangePickerComponent id="daterangepicker" focus={this.onFocus.bind(this)}></DateRangePickerComponent> onFocus(args) { this.show(); } .e-control-wrapper .e-input-group-icon.e-range-icon { display: none; } ```
Enable/Disable the rounded corner Property: showRoundedCorner ``` <EJ.DateRangePicker id="daterangepicker" showRoundedCorner={true} ></EJ.DateRangePicker> ``` Can be achieved by ``` .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group { border-radius: 4px; } ```
FocusIn event Not Applicable Event: focus ``` <DateRangePickerComponent id="daterangepicker" focus={this.onFocus.bind(this)}></DateRangePickerComponent> onFocus(args) {/** code block */ } ```
FocusOut event Not Applicable Event: blur ``` <DateRangePickerComponent id="daterangepicker" blur={this.onBlur.bind(this)}></DateRangePickerComponent> onBlur(args) {/** code block */ } ```
FocusIn method Not Applicable Method: focusIn() ``` <DateRangePickerComponent id="daterangepicker" created={this.onCreate.bind(this)}></DateRangePickerComponent> onCreate(args) { this.focusIn(); } ```
FocusOut method Not Applicable Method: focusOut() ``` <DateRangePickerComponent id="daterangepicker" created={this.onCreate.bind(this)}></DateRangePickerComponent> onCreate(args) { this.focusOut(); } ```
## Accessibility
Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Not Applicable Property: enableRtl ``` <DateRangePickerComponent id="daterangepicker" enableRtl={true}></DateRangePickerComponent> ```
## Persistence
Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence ``` <EJ.DateRangePicker id="daterangepicker" enablePersistence={true} ></EJ.DateRangePicker> ``` Property: enablePersistence ``` <DateRangePickerComponent id="daterangepicker" enablePersistence={true}></DateRangePickerComponent> ```
## Common
Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width ``` ``` Property: width ``` ```
Readonly Not Applicable Property: readonly ``` <DateRangePickerComponent id="daterangepicker" readonly={true}></DateRangePickerComponent> ```
Show/Hide the clear button Not Applicable Property: showClearButton ``` <DateRangePickerComponent id="daterangepicker" showClearButton={true}></DateRangePickerComponent> ```
Height Property: height ``` ``` Can be achieved by ``` .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group { height: 35px; } ```
Show/Hide the week number Not Applicable Property: weekNumber ``` <DateRangePickerComponent id="daterangepicker" weekNumber={true}></DateRangePickerComponent> ```
Watermark text Property: watermarkText ``` ``` Property: placeholder ``` ```
Enable/Disable Property: enabled ``` <EJ.DateRangePicker id="daterangepicker" enabled={false} ></EJ.DateRangePicker> ``` Property: enabled ``` <DateRangePickerComponent id="daterangepicker" enabled={false}></DateRangePickerComponent> ```
Disable the DateRangePicker Method: disable() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var daterangeObj = $("#daterangepicker").data("ejDateRangePicker"); daterangeObj.disable();` } ``` Not Applicable
Enable the DateRangePicker Method: enable() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate() { var daterangeObj = $("#daterangepicker").data("ejDateRangePicker"); daterangeObj.enable(); } ``` Not Applicable
Enable/Disable the input textbox editing Property: allowEdit ``` <EJ.DateRangePicker id="daterangepicker" allowEdit={false}></EJ.DateRangePicker> ``` Property: allowEdit ``` <DateRangePickerComponent id="daterangepicker" allowEdit={true}></DateRangePickerComponent> ```
Specify the placeholder text behavior Not Applicable Property: floatLabelType ``` ```
zIndex Not Applicable Property: zIndex ``` ```
Separator Property: separator ``` ``` Property: separator ``` ```
## Globalization
Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale ``` ``` Property: locale ``` ```
First day of week Not Applicable Property: firstDayOfWeek ``` <DateRangePickerComponent id="daterangepicker" firstDayOfWeek={5}></DateRangePickerComponent> ```
## Strict mode
Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Not Applicable Property: strictMode ``` <DateRangePickerComponent id="daterangepicker" strictMode={true}></DateRangePickerComponent> ```
## Open and Close
Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close ``` <EJ.DateRangePicker id="daterangepicker" close={onClose} ></EJ.DateRangePicker> function onClose() {/** code block */} ``` Event: close ``` <DateRangePickerComponent id="daterangepicker" close={this.onClose.bind(this)}></DateRangePickerComponent> onClose(args) {/** code block */} ```
Hide Method: popupHide() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate(args) { var daterangeObject = $("#daterangepicker").data("ejDateRangePicker"); daterangeObject.popupShow(); daterangeObject.popupHide(); } ``` Method: hide() ``` <DateRangePickerComponent id="daterangepicker" created={this.create.bind(this)}></DateRangePickerComponent> create (args) { this.show(); this.hide(); } ```
Open Event: open ``` <EJ.DateRangePicker id="daterangepicker" open={onOpen} ></EJ.DateRangePicker> function onOpen(args) {/** code block */ } ``` Event: open ``` <DateRangePickerComponent id="daterangepicker" open={this.onOpen.bind(this)}></DateRangePickerComponent> onOpen(args) {/** code block */ } ```
Show Method: popupShow() ``` <EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker> function onCreate(args) { var daterangeObject = $("#daterangepicker").data("ejDateRangePicker"); daterangeObject.popupShow(); } ``` Method: show() ``` <DateRangePickerComponent id="daterangepicker" created={this.create.bind(this)}></DateRangePickerComponent> create (args) { this.show(); } ```