Migration from Essential JS 1 in Angular DatePicker component

<input type="text" ej-datepicker id="datepicker" value="5/5/2019"/>

<ejs-datepicker id="datepicker" value='5/5/2019'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" dateFormat='yyyy/MM/dd'/>

<ejs-datepicker id="datepicker" format="yyyy-MM-dd"></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" dayHeaderFormat="long"/>

<input type="text" ej-datepicker id="datepicker" startLevel="year"/>

<ejs-datepicker id="datepicker" start="Decade"></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" depthLevel="year"/>

<ejs-datepicker id="datepicker" depth="Year"></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" minDate="5/5/2019"/>

<ejs-datepicker id="datepicker" min="6/6/2019"></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" maxDate="5/5/2019"/>

<ejs-datepicker id="datepicker" max="6/6/2019"></ejs-datepicker>

<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)]

<ejs-datepicker id="datepicker" (renderDayCell)="disableDate($event)"></ejs-datepicker>

public disableDate(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
    args.isDisabled = true;
    }
}

<input type="text" ej-datepicker id="datepicker" cssClass="gradient-lime"/>

<ejs-datepicker id="datepicker"  cssClass='gradient-lime'></ejs-datepicker>

<ejs-datepicker id="datepicker" (renderDayCell)="onRenderCell($event)"></ejs-datepicker>

public onRenderCell(args:any) {/** code block */}

<input type="text" ej-datepicker id="datepicker" [showFooter]="false"/>

<ejs-datepicker id="datepicker" [showTodayButton]="false"></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [showOtherMonths]="false"/>

<ejs-datepicker id="datepicker"></ejs-datepicker>

.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;
}

<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)]

<input type="text" ej-datepicker id="datepicker" [showPopupButton]="false"/>

<ejs-datepicker id="datepicker" #dateObj (focus)="onFocus($event)"></ejs-datepicker>

@ViewChild("dateObj") dateObj: DatePickerComponent;

public onFocus(args:any) {
this.dateObj.show();
}

.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;

<input type="text" ej-datepicker id="datepicker" [showRoundedCorner]="true"/>

<ejs-datepicker id="datepicker" #dateObj cssClass='e-customStyle'></ejs-datepicker>

.e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group {
border-radius: 4px;
}

<input type="text" ej-datepicker id="datepicker" [stepMonths]="3"/>

<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"));
}

<input type="text" ej-datepicker id="datepicker" [showTooltip]="false"/>

<input type="text" ej-datepicker id="datepicker" buttonText="Now"/>

<ejs-datepicker id="datepicker" locale='de'></ejs-datepicker>

L10n.load({
'de': {
    'datepicker': { placeholder: 'Wählen Sie ein Datum aus',
    `today: 'heute' }
}
});

<input type="text" ej-datepicker id="datepicker" [displayInline]='true'/>

<input type="text" ej-datepicker id="datepicker" [enableAnimation]='false'/>

<input type="text" ej-datepicker id="datepicker" highlightSection='month'/>

<ejs-datepicker id="datepicker" (renderDayCell)='highlightDate($event)'></ejs-datepicker>

public highlightDate(args:any) {
if (args.date.getDate() === 10) {
    args.element.classList.add('e-highlightweekend');
}
}

.e-highlightweekend {
background-color: #cfe9f3;
}

<input type="text" ej-datepicker id="datepicker" [highlightWeekend]='true'/>

<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');
}
}

.e-highlightweekend {
background-color: #cfe9f3;
}

<input type="text" ej-datepicker id="datepicker" tooltipFormat='dd/MM/yyyy'/>

<input type="text" ej-datepicker id="datepicker" [specialDates]='specialdate'/>

specialdate: Object = [ { date: new Date(), tooltip: "In Australia" }]

<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);
}
}

<input type="text" ej-datepicker id="datepicker" (focusIn)='onFocus($event)'/>

public onFocus(e:any) {
/** code block */
}

<ejs-datepicker id="datepicker" (focus)='onFocus($event)'></ejs-datepicker>

public onFocus(args:any) {
/** code block */  
}

<input type="text" ej-datepicker id="datepicker" (focusOut)='onFocus($event)'/>

public onFocus(e:any) {
/** code block */
}

<ejs-datepicker id="datepicker" (blur)='onBlur($event)'></ejs-datepicker>

public onBlur(args:any) {
/** code block */  
}

<ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker>

@ViewChild("dateObj") dateObj : DatePickerComponent;
public create(args:any){
this.dateObj.focusIn();
}

<ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker>

@ViewChild("dateObj") dateObj : DatePickerComponent;
public create(args:any){
this.dateObj.focusIn();
this.dateObj.focusOut();
}

<ejs-datepicker id="datepicker"  (close)='onClose($event)'></ejs-datepicker>

public onClose(args) {
/*Triggers when the popup gets close*/
args.cancel = true;
}

<ejs-datepicker id="datepicker" (open)='onOpen($event)'></ejs-datepicker>

public onOpen(args:any) {
/*Triggers when the popup gets close*/
args.cancel = true;
}

<input type="text" ej-datepicker id="datepicker" [enableRTL]='true'/>

<ejs-datepicker id="datepicker" [enableRtl]='true'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [enablePersistence]='true'/>

<ejs-datepicker id="datepicker" [enablePersistence]='true'></ejs-datepicker>

<input type="text" ej-datepicker id="timePicker"  [validationRules]="validationRules"/>

validationRules:Object;
constructor(){
this.validationRules = {required:true};
}

<ejs-datepicker id="datepicker" floatLabelType='Always'></ejs-datepicker>

let options: FormValidatorModel = {
rules: {
    'datepicker': { required: [true, "Value is required"] } }};
    this.formObject = new FormValidator('#form-element', options);

<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};
}

<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);

<input type="text" ej-datepicker id="datepicker" width='300px'/>

<ejs-datepicker id="datepicker" width='300px'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [readOnly]='true'/>

<ejs-datepicker id="datepicker" [readonly]='true'></ejs-datepicker>

<ejs-datepicker id="datepicker" [showClearButton]='false'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" height='50px'/>

<ejs-datepicker id="datepicker" cssClass='e-custom-style'></ejs-datepicker>

.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}

<input type="text" ej-datepicker id="datepicker" [htmlAttributes] = 'htmlAttributes'/>

htmlAttributes : Object = {required:"required"}

<input type="text" ej-datepicker id="datepicker" [weekNumber] = 'true'/>

<ejs-datepicker id="datepicker" [weekNumber]='true'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" watermarkText= 'Enter a date'/>

<ejs-datepicker id="datepicker" placeholder='Enter Date'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [enabled]= 'false'/>

<ejs-datepicker id="datepicker" [enabled]='false'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/>

public onCreate(e:any) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.disable();
}

<input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/>

public onCreate(e:any) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.enable();
}

<input type="text" ej-datepicker id="datepicker" [allowEdit]= 'true'/>

<ejs-datepicker id="datepicker" [allowEdit]='false'></ejs-datepicker>

<ejs-datepicker id="datepicker" zIndex="2000"></ejs-datepicker>

<ejs-datepicker id="datepicker" placeholder='Enter date' floatLabelType='Auto'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" locale="en-US"/>

<ejs-datepicker id="datepicker" locale='en'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [startDay]="4"/>

<ejs-datepicker id="datepicker" [firstDayOfWeek]='5'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" [enableStrictMode]="true"/>

<ejs-datepicker id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" [strictMode]='true'></ejs-datepicker>

<input type="text" ej-datepicker id="datepicker" (close)="onClose($event)"/>

public onClose(e:any) { /** code block */ }

<ejs-datepicker id="datepicker" (close)="onClose($event")></ejs-datepicker>

public onClose(args:any) { /** code block */ }

<input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/>

public onCreate(e:any) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
dateObject.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();
}

<input type="text" ej-datepicker id="datepicker" (open)="onOpen($event)"/>

public onOpen(e:any) { /** code block */ }

<ejs-datepicker id="datepicker" (open)="onOpen($event")></ejs-datepicker>

public onOpen(args:any) { /** code block */ }

<input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/>

public onCreate(e:any) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
}

<ejs-datepicker id="datepicker" #dateObj (created)="onCreate($event")></ejs-datepicker>

@ViewChild("dateObj") dateObj: DatePickerComponent;
public onCreate(args:any){
this.dateObj.show();
}

<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"));
}

<input type="text" ej-datepicker id="datepicker" (navigate)="onNavigate($event")/>

public onNavigate(e:any) {/** code block */ }

<ejs-datepicker id="datepicker" (navigated)="onNavigated($event)"></ejs-datepicker>

public onNavigated(args:any) {/** code block */ }

<input type="text" ej-datepicker id="datepicker" [allowDirllDown]="true")/>