Ej1 api migration in React Daterangepicker component
17 Mar 20254 minutes to read
This article describes the API migration process of DateRangePicker component from Essential® JS 1 to Essential® JS 2.
| 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>
```
|
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Display the date format
|
Property: dateFormat
```
```
|
Property: format
```
```
|
</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();
}
```
|