Search results

Migration from Essential JS 1

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
<EJ.DateRangePicker id="daterangepicker" value="5/5/2019-6/6/2019" ></EJ.DateRangePicker>
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
<EJ.DateRangePicker id="daterangepicker" dateFormat="dd/MM/yyyy" ></EJ.DateRangePicker>
Property: format
<DateRangePickerComponent id="daterangepicker" format="dd/MMM/yy hh:mm a" ></DateRangePickerComponent>

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: minDate
<EJ.DateRangePicker id="daterangepicker" minDate="7/7/2019" ></EJ.DateRangePicker>
Property: min
<DateRangePickerComponent id="daterangepicker" min="7/7/2019" ></DateRangePickerComponent>
Maximum date Property: maxDate
<EJ.DateRangePicker id="daterangepicker" maxDate="7/7/2019" ></EJ.DateRangePicker>
Property: max
<DateRangePickerComponent id="daterangepicker" max="7/7/2019" ></DateRangePickerComponent>
Start date Property: startDate
<EJ.DateRangePicker id="daterangepicker" startDate="7/7/2019" ></EJ.DateRangePicker>
Property: startDate
<DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" ></DateRangePickerComponent>
End date Property: endDate
<EJ.DateRangePicker id="daterangepicker" endDate="7/7/2019" ></EJ.DateRangePicker>
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());

<DateRangePickerComponent placeholder='Select a range'>
    <PresetsDirective >
        <PresetDirective label="This Week" start={this.weekStart} end={this.weekEnd}> </PresetDirective>
     </PresetsDirective>
</DateRangePickerComponent>
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

Disabled Dates

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
<EJ.DateRangePicker id="daterangepicker" cssClass="gradient-lime"></EJ.DateRangePicker>
Property: cssClass
<DateRangePickerComponent id="daterangepicker" cssClass="gradient-lime"></DateRangePickerComponent>
Enable/Disable TimePicker with DateRangePicker Property: enableTimePicker
<EJ.DateRangePicker id="daterangepicker" enableTimePicker={true} ></EJ.DateRangePicker>
Not Applicable
Time format Property: timeFormat
<EJ.DateRangePicker id="daterangepicker" timeFormat="HH:mm" ></EJ.DateRangePicker>
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
<DateRangePickerComponent id="daterangepicker" locale="en"></DateRangePickerComponent>

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
<DateRangePickerComponent id="daterangepicker" cssClass="e-custom-style"></DateRangePickerComponent>

.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
<EJ.DateRangePicker id="daterangepicker" width="200px" ></EJ.DateRangePicker>
Property: width
<DateRangePickerComponent id="daterangepicker" width="200px"></DateRangePickerComponent>
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
<EJ.DateRangePicker id="daterangepicker" height="35px" ></EJ.DateRangePicker>
Can be achieved by
<DateRangePickerComponent id="daterangepicker" cssClass="e-custom-style"></DateRangePickerComponent>

.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
<EJ.DateRangePicker id="daterangepicker" watermarkText="Select a Range" ></EJ.DateRangePicker>
Property: placeholder
<DateRangePickerComponent id="daterangepicker" placeholder="Select a Range"></DateRangePickerComponent>
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
<DateRangePickerComponent id="daterangepicker" floatLabelType="Auto"></DateRangePickerComponent>
zIndex Not Applicable Property: zIndex
<DateRangePickerComponent id="daterangepicker" zIndex="2000"></DateRangePickerComponent>
Separator Property: separator
<EJ.DateRangePicker id="daterangepicker" separator="#" ></EJ.DateRangePicker>
Property: separator
<DateRangePickerComponent id="daterangepicker" separator="@"></DateRangePickerComponent>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
<EJ.DateRangePicker id="daterangepicker" locale="en-Us" ></EJ.DateRangePicker>
Property: locale
<DateRangePickerComponent id="daterangepicker" locale="en"></DateRangePickerComponent>
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();
}