Ej1 api migration in Angular Daterangepicker component
17 Nov 20224 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
```
|
Date Format
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Display date format | Property: dateFormat ``` ``` |
Property: format
```
|
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
```
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Start date | Property: startDate ``` ``` |
Property: startDate
```
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
End date | Property: endDate ``` ``` |
Property: endDate
```
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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());
```
```
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 | </tr> </thead> </table> ## 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; } } ``` |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
CSS Class | Property: cssClass ``` ``` |
Property: cssClass
```
|
Enable/Disable the TimePicker with DateRangePicker | Property: enableTimePicker ``` <input type="text" ej-daterangepicker id="daterangepicker" [enableTimePicker]='true'/> ``` | Not Applicable |
Time format | Property: timeFormat ``` ``` | Not Applicable |
Minimum days span | Not Applicable |
Property: minDays
```
|
Maximum days span | Not Applicable |
Property: maxDays
```
|
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
```
|
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(); } ``` ```css .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
```
|
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(); } ``` |
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> ``` |
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> ``` |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Width | Property: width ``` ``` |
Property: width
```
|
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 ``` ``` |
Can be achieved by
```
|
Show/Hide the week number | Not Applicable | Property: weekNumber ``` <ejs-daterangepicker id="daterangepicker" [weekNumber]="true"></ejs-daterangepicker> ``` |
Watermark text | Property: watermarkText ``` ``` |
Property: placeholder
```
|
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
```
|
zIndex | Not Applicable |
Property: zIndex
```
|
Separator | Property: separator ``` ``` |
Property: separator
```
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Locale | Property: locale ``` ``` |
Property: locale
```
|
First day of week | Not Applicable | Property: firstDayOfWeek ``` <ejs-daterangepicker id="daterangepicker" [firstDayOfWeek]="3"></ejs-daterangepicker> ``` |
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> ``` |
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(); } ``` |