Ej1 api migration in Angular Datepicker component

5 Apr 20257 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 ``` ``` ```css .e-datepicker .e-calendar .e-content tr.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month > .e-day { visibility: none; } .e-datepicker .e-calendar .e-content td.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month { pointer-events: none; touch-action: none; } ```
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 ``` ``` ``` L10n.load({ 'de': { 'datepicker': { placeholder: 'Wählen Sie ein Datum aus', `today: 'heute' } } }); ```
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> ```
## Persistence
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> ```
## Validation
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 ``` ``` ``` let options: FormValidatorModel = { rules: { 'datepicker': { required: [true, "Value is required"] } }}; this.formObject = new FormValidator('#form-element', options); ```
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); ```
## Common </table> ## Globalization
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 ``` ``` ```css .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { height: 35px; } ```
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> ```
## Strict Mode
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> ```
## Open and Close
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(); } ```
## View Navigation
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