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
<input type="text" ej-daterangepicker id="daterangepicker" value="5/5/2019-6/6/2019"/>
Property: value
<ejs-daterangepicker id="daterangepicker" value='value'></ejs-daterangepicker>
public value: Date[] = [new Date("10/07/2017"), new Date("2/2/2019")]

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display date format Property: dateFormat
<input type="text" ej-daterangepicker id="daterangepicker" dateFormat="dd/MM/yyyy"/>
Property: format
<ejs-daterangepicker id="daterangepicker" format="dd/MMM/yy hh:mm a"></ejs-daterangepicker>

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: minDate
<input type="text" ej-daterangepicker id="daterangepicker" minDate="7/7/2019"/>
Property: min
<ejs-daterangepicker id="daterangepicker" min="7/7/2019"></ejs-daterangepicker>
Maximum date Property: maxDate
<input type="text" ej-daterangepicker id="daterangepicker" maxDate="7/7/2019"/>
Property: max
<ejs-daterangepicker id="daterangepicker" max="7/7/2019"></ejs-daterangepicker>
Start date Property: startDate
<input type="text" ej-daterangepicker id="daterangepicker" startDate="7/7/2019"/>
Property: startDate
<ejs-daterangepicker id="daterangepicker" startDate="7/7/2019"></ejs-daterangepicker>
End date Property: endDate
<input type="text" ej-daterangepicker id="daterangepicker" endDate="7/7/2019"/>
Property: endDate
<ejs-daterangepicker id="daterangepicker" startDate="7/7/2019" endDate="8/8/2019"></ejs-daterangepicker>
Preset ranges Property: ranges
<input type="text" ej-daterangepicker id="daterangepicker" [ranges]='ranges'/>
ranges: Object = [{ label: "Today", range: [new Date(), new Date()] },{ label: "Last Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] }]
Property: presets
public today: Date = new Date(new Date().toDateString());
    public weekStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());
    public weekEnd: Date = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate()
        - (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString());
<ejs-daterangepicker placeholder='Select a range'>
    <e-presets>
        <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
    </e-presets>
</ejs-daterangepicker>
Add ranges Method: addRanges()
<input type="text" ej-daterangepicker id="daterangepicker" (create)='onCreate($event)'/>
public onCreate(e:any) {
    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()
<input type="text" ej-daterangepicker id="daterangepicker" (create)='onCreate($event)'/>
public onCreate(e:any) {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    dateObj.clearRanges();
}
Not Applicable
Get selected range Method: getSelectedRange()
<input type="text" ej-daterangepicker id="daterangepicker" startDate="5/5/2019" endDate="8/8/2019" (create)='onCreate($event)'/>
public onCreate(e:any) {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    console.log(dateObj.getSelectedRange());
}
Method: getSelectedRange()
<ejs-daterangepicker id="daterangepicker" #rangeObj startDate="7/7/2019" endDate="8/8/2019" (created)="onCreate($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;

public onCreate (args: any) {
    console.log(this.rangeObj.getSelectedRange());
}
Set date range Method: setRange()
<input type="text" ej-daterangepicker id="daterangepicker" (create)='onCreate($event)'/>
public onCreate (args: any) {
    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
<ejs-daterangepicker id="daterangepicker" (renderDayCell)="disableDaterange($event)"></ejs-daterangepicker>
public disableDaterange(args:any) {
    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
<input type="text" ej-daterangepicker id="daterangepicker" cssClass='gradient-lime'/>
Property: cssClass
<ejs-daterangepicker id="daterangepicker" cssClass="gradient-lime"></ejs-daterangepicker>
Enable/Disable the TimePicker with DateRangePicker Property: enableTimePicker
<input type="text" ej-daterangepicker id="daterangepicker" [enableTimePicker]='true'/>
Not Applicable
Time format Property: timeFormat
<input type="text" ej-daterangepicker id="daterangepicker" timeFormat="HH:mm"/>
Not Applicable
Minimum days span Not Applicable Property: minDays
<ejs-daterangepicker id="daterangepicker" minDays="5"></ejs-daterangepicker>
Maximum days span Not Applicable Property: maxDays
<ejs-daterangepicker id="daterangepicker" maxDays="5"></ejs-daterangepicker>
Button text Property: buttonText
<input type="text" ej-daterangepicker id="daterangepicker" [buttonText]='buttonText'/>
buttonText: Object = { reset: "Again", cancel: "Cut", apply: "Ok" }
Can be achieved by
<ejs-daterangepicker id="daterangepicker" locale="en"></ejs-daterangepicker>
L10n.load({
    'en': {
        'daterangepicker': { applyText: 'Apply' }
    }
});
Show/Hide the popup button Property: showPopupButton
<input type="text" ej-daterangepicker id="daterangepicker" [showPopupButton]='false'/>
Event: focus
<ejs-daterangepicker id="daterangepicker" #rangeObj (focus)="onFocus($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;

public onFocus(args:any) {
    this.rangeObj.show();
}
.e-control-wrapper .e-input-group-icon.e-range-icon {
    display: none;
}
Enable/Disable the rounded corner Property: showRoundedCorner
<input type="text" ej-daterangepicker id="daterangepicker" [showRoundedCorner]='true'/>
Can be achieved by
<ejs-daterangepicker id="daterangepicker" cssClass="e-custom-style"></ejs-daterangepicker>
.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
    border-radius: 4px;
}
FocusIn event Not Applicable Event: focus
<ejs-daterangepicker id="daterangepicker" (focus)="onFocus($event)"></ejs-daterangepicker>
public onFocus(args:any) {/** code block */ }
FocusOut event Not Applicable Event: blur
<ejs-daterangepicker id="daterangepicker" (blur)="onBlur($event)"></ejs-daterangepicker>
public onBlur(args:any) {/** code block */ }
FocusIn method Not Applicable Method: focusIn()
<ejs-daterangepicker id="daterangepicker" #rangeObj (created)="onCreate($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;
public onCreate(args:any) {
    this.rangeObj.focusIn();
}
FocusOut method Not Applicable Method: focusOut()
<ejs-daterangepicker id="daterangepicker" #rangeObj (created)="onCreate($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;
public onCreate(args:any) {
    this.rangeObj.focusOut();
}

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Not Applicable Property: enableRtl
<ejs-daterangepicker id="daterangepicker" [enableRtl]="true"></ejs-daterangepicker>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence
<input type="text" ej-daterangepicker id="daterangepicker" [enablePersistence]='true'/>
Property: enablePersistence
<ejs-daterangepicker id="daterangepicker" [enablePersistence]="true"></ejs-daterangepicker>

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width
<input type="text" ej-daterangepicker id="daterangepicker" width="200px"/>
Property: width
<ejs-daterangepicker id="daterangepicker" width="200px"></ejs-daterangepicker>
Readonly Not Applicable Property: readonly
<ejs-daterangepicker id="daterangepicker" [readonly]="true"></ejs-daterangepicker>
Show/Hide the clear button Not Applicable Property: showClearButton
<ejs-daterangepicker id="daterangepicker" [showClearButton]="false"></ejs-daterangepicker>
Height Property: height
<input type="text" ej-daterangepicker id="daterangepicker" height="35px"/>
Can be achieved by
<ejs-daterangepicker id="daterangepicker" cssClass="e-custom-style"></ejs-daterangepicker>
.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
    height: 35px;
}
Show/Hide the week number Not Applicable Property: weekNumber
<ejs-daterangepicker id="daterangepicker" [weekNumber]="true"></ejs-daterangepicker>
Watermark text Property: watermarkText
<input type="text" ej-daterangepicker id="daterangepicker" watermarkText="Select a Range"/>
Property: placeholder
<ejs-daterangepicker id="daterangepicker" placeholder="Select a Range"></ejs-daterangepicker>
Enable/Disable Property: enabled
<input type="text" ej-daterangepicker id="daterangepicker" [enabled]="false"/>
Property: enabled
<ejs-daterangepicker id="daterangepicker" [enable]="false"></ejs-daterangepicker>
Disable the DateRangePicker Method: disable()
<input type="text" ej-daterangepicker id="daterangepicker" (create)="onCreate($event)"/>
public onCreate(e:any) {
    var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObj.disable();
}
Not Applicable
Enable the DateRangePicker Method: enable()
<input type="text" ej-daterangepicker id="daterangepicker" (create)="onCreate($event)"/>
public onCreate(e:any) {
    var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObj.enable();
}
Not Applicable
Enable/Disable the input textbox editing Property: allowEdit
<input type="text" ej-daterangepicker id="daterangepicker" [allowEdit]="false"/>
Property: allowEdit
<ejs-daterangepicker id="daterangepicker" [allowEdit]="false"></ejs-daterangepicker>
Specify the placeholder text behavior Not Applicable Property: floatLabelType
<ejs-daterangepicker id="daterangepicker" floatLabelType="Auto"></ejs-daterangepicker>
zIndex Not Applicable Property: zIndex
<ejs-daterangepicker id="daterangepicker" zIndex="2000"></ejs-daterangepicker>
Separator Property: separator
<input type="text" ej-daterangepicker id="daterangepicker" separator="#"/>
Property: separator
<ejs-daterangepicker id="daterangepicker" separator="@"></ejs-daterangepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
<input type="text" ej-daterangepicker id="daterangepicker" locale="en-Us"/>
Property: locale
<ejs-daterangepicker id="daterangepicker" locale="en"></ejs-daterangepicker>
First day of week Not Applicable Property: firstDayOfWeek
<ejs-daterangepicker id="daterangepicker" [firstDayOfWeek]="3"></ejs-daterangepicker>

Strict mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Not Applicable Property: strictMode
<ejs-daterangepicker id="daterangepicker" [strictMode]="true"></ejs-daterangepicker>

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close
<input type="text" ej-daterangepicker id="daterangepicker" (close)="onClose($event)"/>
public onClose(e:any) {/** code block */}
Event: close
<ejs-daterangepicker id="daterangepicker" (close)="onClose($event)"></ejs-daterangepicker>
public onClose(args:any) {/** code block */}
Hide Method: popupHide()
<input type="text" ej-daterangepicker id="daterangepicker" (create)="onCreate($event)"/>
public onCreate(e:any) {
    var daterangeObject = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObject.popupShow(); daterangeObject.popupHide();
}
Method: hide()
<ejs-daterangepicker id="daterangepicker" #rangeObj (created)="create($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;
public create(args:any) {
    this.rangeObj.show();
    this.rangeObj.hide();
}
Open Event: open
<input type="text" ej-daterangepicker id="daterangepicker" (open)="onOpen($event)"/>
public onOpen(e:any) {/** code block */}
Event: open
<ejs-daterangepicker id="daterangepicker" (open)="onOpen($event)"></ejs-daterangepicker>
public onOpen(args:any) {/** code block */}
Show Method: popupShow()
<input type="text" ej-daterangepicker id="daterangepicker" (create)="onCreate($event)"/>
public onCreate(e:any) {
    var daterangeObject = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObject.popupShow();
}
Method: show()
<ejs-daterangepicker id="daterangepicker" #rangeObj (created)="create($event)"></ejs-daterangepicker>
@ViewChild("rangeObj") rangeObj: DateRangePickerComponent;

public create(args:any) {
    this.rangeObj.show();
}