Contents
- Date Selection
- Date Format
- Date Range
Having trouble getting help?
Contact Support
Contact Support
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
</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
```
|
| 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 |
| 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(); } ``` |