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;
}
```
</table>
## Accessibility
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