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 ``` ``` ``` 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 ``` ``` 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()); ``` ``` <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset> ```
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; } } ```
## Customization
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 ``` ``` ``` 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(); } ``` ```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 ``` ``` ```css .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 ``` ``` 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 ``` ``` ```css .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 ``` ``` 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 ``` ```
## 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 ``` <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(); } ```