Contents
- Date Selection
- Date Format
- Calendar Views
- Date Range
- Disabled Dates
- Customization
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular Datepicker component
17 Nov 20227 minutes to read
This article describes the API migration process of DatePicker 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
```
|
| Day header format | Property: dayHeaderFormat ``` ``` | Not Applicable |
Calendar Views
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Start view | Property: startLevel ``` ``` |
Property: start
```
|
| Depth view | Property: depthLevel ``` ``` |
Property: depth
```
|
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
```
|
Disabled Dates
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Block-out dates | Property: blackoutDates ``` <input type="text" ej-datepicker id="datepicker" [blackoutDates]='blackoutDates'/> ``` ``` blackoutDates : Object = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" (renderDayCell)="disableDate($event)"></ejs-datepicker> ``` ``` public disableDate(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.isDisabled = true; } } ``` |
Customization
</table> ## Accessibility| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| CSS Class | Property: cssClass ``` ``` |
Property: cssClass
```
|
| Event callback for each cell creation | Not Applicable | Event: renderDayCell ``` <ejs-datepicker id="datepicker" (renderDayCell)="onRenderCell($event)"></ejs-datepicker> ``` ``` public onRenderCell(args:any) {/** code block */} ``` |
| Show/Hide the today button | Property: showFooter ``` <input type="text" ej-datepicker id="datepicker" [showFooter]="false"/> ``` | Property: showTodayButton ``` <ejs-datepicker id="datepicker" [showTodayButton]="false"></ejs-datepicker> ``` |
| Show/Hide the other month dates | Property: showOtherMonths ``` <input type="text" ej-datepicker id="datepicker" [showOtherMonths]="false"/> ``` |
Can be achieved by
```
|
| Show/Hide the disabled date | Property: showDisabledRange ``` <input type="text" ej-datepicker id="datepicker" [showDisabledRange]="false" [blackoutDates]='blackoutDates'/> ``` ``` blackoutDates : Object = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] ``` | Not Applicable |
| Show/Hide the popup button | Property: showPopupButton ``` <input type="text" ej-datepicker id="datepicker" [showPopupButton]="false"/> ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" #dateObj (focus)="onFocus($event)"></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj: DatePickerComponent; public onFocus(args:any) { this.dateObj.show(); } ``` ```css .e-control-wrapper .e-input-group-icon.e-date-icon { display: none; ``` |
| Enable/Disable the rounded corner | Property: showRoundedCorner ``` <input type="text" ej-datepicker id="datepicker" [showRoundedCorner]="true"/> ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" #dateObj cssClass='e-customStyle'></ejs-datepicker> ``` ```css .e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group { border-radius: 4px; } ``` |
| Skip a month | Property: stepMonths ``` <input type="text" ej-datepicker id="datepicker" [stepMonths]="3"/> ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" #dateObj value='5/5/2019' (open)="onOpen($event)"></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj: DatePickerComponent; public onOpen(args:any){ this.dateObj.navigateTo('Year', new Date("03/18/2028")); } ``` |
| Show/Hide the tooltip | Property: showTooltip ``` <input type="text" ej-datepicker id="datepicker" [showTooltip]="false"/> ``` | Not Applicable |
| Today button text | Property: buttonText ``` ``` |
Can be achieved by
```
|
| Display inline | Property: displayInline ``` <input type="text" ej-datepicker id="datepicker" [displayInline]='true'/> ``` | Not Applicable |
| Enable/Disable the animation | Property: enableAnimation ``` <input type="text" ej-datepicker id="datepicker" [enableAnimation]='false'/> ``` | Not Applicable |
| Highlight dates | Property: highlightSection ``` ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" (renderDayCell)='highlightDate($event)'></ejs-datepicker> ``` ``` public highlightDate(args:any) { if (args.date.getDate() === 10) { args.element.classList.add('e-highlightweekend'); } } ``` ```css .e-highlightweekend { background-color: #cfe9f3; } ``` |
| Highlight weekend | Property: highlightWeekend ``` <input type="text" ej-datepicker id="datepicker" [highlightWeekend]='true'/> ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" (renderDayCell)='highlightDate($event)'></ejs-datepicker> ``` ``` public highlightDate(args:any) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.element.classList.add('e-highlightweekend'); } } ``` ```css .e-highlightweekend { background-color: #cfe9f3; } ``` |
| Tooltip format | Property: tooltipFormat ``` ``` | Not Applicable |
| Special dates | Property: specialDates ``` <input type="text" ej-datepicker id="datepicker" [specialDates]='specialdate'/> ``` ``` specialdate: Object = [ { date: new Date(), tooltip: "In Australia" }] ``` | Can be achieved by ``` <ejs-datepicker id="datepicker" (renderDayCell)='customDates($event)' value='5/5/2017'></ejs-datepicker> ``` ``` public customDates(args:any) { let span: HTMLElement; if (args.date.getDate() === 10) { span = document.createElement('span'); span.setAttribute('class', 'e-icons highlight'); args.element.firstElementChild.setAttribute('title', 'Birthday !'); args.element.setAttribute('title', 'Birthday !'); args.element.setAttribute('data-val', 'Birthday !'); args.element.appendChild(span); } } ``` |
| FocusIn event | Event: focusIn ``` <input type="text" ej-datepicker id="datepicker" (focusIn)='onFocus($event)'/> ``` ``` public onFocus(e:any) { /** code block */ } ``` | Event: focus ``` <ejs-datepicker id="datepicker" (focus)='onFocus($event)'></ejs-datepicker> ``` ``` public onFocus(args:any) { /** code block */ } ``` |
| FocusOut event | Event: focusOut ``` <input type="text" ej-datepicker id="datepicker" (focusOut)='onFocus($event)'/> ``` ``` public onFocus(e:any) { /** code block */ } ``` | Event: blur ``` <ejs-datepicker id="datepicker" (blur)='onBlur($event)'></ejs-datepicker> ``` ``` public onBlur(args:any) { /** code block */ } ``` |
| FocusIn method | Not Applicable | Method: focusIn() ``` <ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj : DatePickerComponent; public create(args:any){ this.dateObj.focusIn(); } ``` |
| FocusOut method | Not Applicable | Method: focusOut() ``` <ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj : DatePickerComponent; public create(args:any){ this.dateObj.focusIn(); this.dateObj.focusOut(); } ``` |
| Prevent popup close | Not Applicable | Event: Close ``` <ejs-datepicker id="datepicker" (close)='onClose($event)'></ejs-datepicker> ``` ``` public onClose(args) { /*Triggers when the popup gets close*/ args.cancel = true; } ``` |
| Prevent popup open | Not Applicable | Event: Open ``` <ejs-datepicker id="datepicker" (open)='onOpen($event)'></ejs-datepicker> ``` ``` public onOpen(args:any) { /*Triggers when the popup gets close*/ args.cancel = true; } ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/Disable the RTL | Property: enableRTL ``` <input type="text" ej-datepicker id="datepicker" [enableRTL]='true'/> ``` | Property: enableRtl ``` <ejs-datepicker id="datepicker" [enableRtl]='true'></ejs-datepicker> ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/Disable the persistence | Property: enablePersistence ``` <input type="text" ej-datepicker id="datepicker" [enablePersistence]='true'/> ``` | Property: enablePersistence ``` <ejs-datepicker id="datepicker" [enablePersistence]='true'></ejs-datepicker> ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Validation rules | Property: validationRules ``` <input type="text" ej-datepicker id="timePicker" [validationRules]="validationRules"/> ``` ``` validationRules:Object; constructor(){ this.validationRules = {required:true}; } ``` |
Can be achieved by
```
|
| Validation message | Property: validationMessage ``` <input type="text" ej-datepicker id="timePicker" [validationRules]="validationRules" [validationMessage]="validationMessage"/> ``` ``` validationRules:Object; validationMessage:Object; constructor(){ this.validationMessage = {required: "Required Date value"}; this.validationRules = {required:true}; } ``` | Can be achieved by ``` <ejs-datepicker #datepicker id="datepicker" floatLabelType='Always'></ejs-datepicker> ``` ``` let options: FormValidatorModel = { rules: { 'datepicker': { required: [true, "Value is required"] } }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { inputElement.parentElement.parentElement.appendChild(errorElement); } }; this.formObject = new FormValidator('#form-element', options); ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Width | Property: width ``` ``` |
Property: width
```
|
| Readonly | Property: readonly ``` <input type="text" ej-datepicker id="datepicker" [readOnly]='true'/> ``` | Property: readonly ``` <ejs-datepicker id="datepicker" [readonly]='true'></ejs-datepicker> ``` |
| Show/Hide the clear button | Not Applicable | Property: showClearButton ``` <ejs-datepicker id="datepicker" [showClearButton]='false'></ejs-datepicker> ``` |
| Height | Property: height ``` ``` |
Can be achieved by
```
|
| Html attributes | Property: HtmlAttributes ``` <input type="text" ej-datepicker id="datepicker" [htmlAttributes] = 'htmlAttributes'/> ``` ``` htmlAttributes : Object = {required:"required"} ``` | Not Applicable |
| Enable/Disable the week number | Property: weekNumber ``` <input type="text" ej-datepicker id="datepicker" [weekNumber] = 'true'/> ``` | Property: weekNumber ``` <ejs-datepicker id="datepicker" [weekNumber]='true'></ejs-datepicker> ``` |
| Watermark text | Property: watermarkText ``` ``` |
Property: placeholder
```
|
| Disable/Enable | Property: enabled ``` <input type="text" ej-datepicker id="datepicker" [enabled]= 'false'/> ``` | Property: enabled ``` <ejs-datepicker id="datepicker" [enabled]='false'></ejs-datepicker> ``` |
| Disable the DatePicker | Method: disable() ``` <input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/> ``` ``` public onCreate(e:any) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.disable(); } ``` | Not Applicable |
| Enable the DatePicker | Method: enable() ``` <input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/> ``` ``` public onCreate(e:any) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.enable(); } ``` | Not Applicable |
| Enable/Disable the textBox editing | Property: AllowEdit ``` <input type="text" ej-datepicker id="datepicker" [allowEdit]= 'true'/> ``` | Property: AllowEdit ``` <ejs-datepicker id="datepicker" [allowEdit]='false'></ejs-datepicker> ``` |
| zIndex | Not Applicable |
Property: zIndex
```
|
| Specify the placeholder text behavior | Not Applicable |
Property: floatLabelType
```
|
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Locale | Property: Locale ``` ``` |
Property: locale
```
|
| First day of week | Property: startDay ``` <input type="text" ej-datepicker id="datepicker" [startDay]="4"/> ``` | Property: firstDayOfWeek ``` <ejs-datepicker id="datepicker" [firstDayOfWeek]='5'></ejs-datepicker> ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Strict mode | Property: enableStrictMode ``` <input type="text" ej-datepicker id="datepicker" [enableStrictMode]="true"/> ``` | Property: strictMode ``` <ejs-datepicker id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" [strictMode]='true'></ejs-datepicker> ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Close | Event: Close ``` <input type="text" ej-datepicker id="datepicker" (close)="onClose($event)"/> ``` ``` public onClose(e:any) { /** code block */ } ``` | Event: Close ``` <ejs-datepicker id="datepicker" (close)="onClose($event")></ejs-datepicker> ``` ``` public onClose(args:any) { /** code block */ } ``` |
| Hide | Method: hide() ``` <input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/> ``` ``` public onCreate(e:any) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.show(); dateObject.hide(); } ``` | Method: hide() ``` <ejs-datepicker id="datepicker" #dateObj (created)="onCreate($event")></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj: DatePickerComponent; public onCreate(args:any){ this.dateObj.show(); this.dateObj.hide(); } ``` |
| Open | Event: Open ``` <input type="text" ej-datepicker id="datepicker" (open)="onOpen($event)"/> ``` ``` public onOpen(e:any) { /** code block */ } ``` | Event: Open ``` <ejs-datepicker id="datepicker" (open)="onOpen($event")></ejs-datepicker> ``` ``` public onOpen(args:any) { /** code block */ } ``` |
| Show | Method: show() ``` <input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/> ``` ``` public onCreate(e:any) { var dateObject = $("#datepicker").data("ejDatePicker"); dateObject.show(); } ``` | Method: show() ``` <ejs-datepicker id="datepicker" #dateObj (created)="onCreate($event")></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj: DatePickerComponent; public onCreate(args:any){ this.dateObj.show(); } ``` |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Navigate to specific month | Not Applicable | Method: navigateTo() ``` <ejs-datepicker id="datepicker" #dateObj value='5/5/2019' (open)="onOpen($event)"></ejs-datepicker> ``` ``` @ViewChild("dateObj") dateObj: DatePickerComponent; public onOpen(args:any){ this.dateObj.navigateTo('Year', new Date("03/18/2028")); } ``` |
| Navigation callback | Event: Navigate ``` <input type="text" ej-datepicker id="datepicker" (navigate)="onNavigate($event")/> ``` ``` public onNavigate(e:any) {/** code block */ } ``` | Event: Navigated ``` <ejs-datepicker id="datepicker" (navigated)="onNavigated($event)"></ejs-datepicker> ``` ``` public onNavigated(args:any) {/** code block */ } ``` |
| Enable/Disable the drill down | Property: allowDirllDown ``` <input type="text" ej-datepicker id="datepicker" [allowDirllDown]="true")/> ``` | Not Applicable |