Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
CSS Class
|
Property: cssClass
<EJ.DatePicker id="datepicker" cssClass="gradient-lime" ></EJ.DatePicker>
|
Property: cssClass
<DatePickerComponent id="datepicker" cssClass='gradient-lime'></DatePickerComponent>
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
<DatePickerComponent id="datepicker" renderDayCell={this.onRenderCell.bind(this)}></DatePickerComponent>
onRenderCell() {}
|
Show/Hide the today button
|
Property: showFooter
<EJ.DatePicker id="datepicker" showFooter={false} ></EJ.DatePicker>
|
Property: showTodayButton
<DatePickerComponent id="datepicker" showTodayButton ={false}></DatePickerComponent>
|
Show/Hide the other month dates
|
Property: showOtherMonths
<EJ.DatePicker id="datepicker" showOtherMonths={false} ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker"></DatePickerComponent>
.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
var blackoutDates = [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)]
<EJ.DatePicker id="datepicker" showDisabledRange={false} blackoutDates={blackoutDates} ></EJ.DatePicker>
|
Not Applicable
|
Show/Hide the popup button
|
Property: showPopupButton
<EJ.DatePicker id="datepicker" showPopupButton={false} ></EJ.DatePicker>
|
Event: Focus
<DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent>
onFocus(args) {
this.show();
}
.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
|
Enable/Disable the rounded corner
|
Property: showRoundedCorner
<EJ.DatePicker id="datepicker" showRoundedCorner={true} ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" cssClass='e-customStyle'></DatePickerComponent>
.e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group {
border-radius: 4px;
}
|
Skip a month
|
Property: stepMonths
<EJ.DatePicker id="datepicker" stepMonths={3} ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" value='5/5/2019' open={this.onOpen.bind(this)}></DatePickerComponent>
onOpen(args){
datepicker.navigateTo('Year', new Date("03/18/2028"));
}
|
Show/Hide the tooltip
|
Property: showTooltip
<EJ.DatePicker id="datepicker" showTooltip={false} ></EJ.DatePicker>
|
Not Applicable
|
Today button text
|
Property: buttonText
<EJ.DatePicker id="datepicker" buttonText="Now" ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" locale='de'></DatePickerComponent>
L10n.load({
'de': {
'datepicker': { placeholder: 'Wählen Sie ein Datum aus',
`today: 'heute' }
}
});
|
Display Inline
|
Property: displayInline
<EJ.DatePicker id="datepicker" displayInline={true} ></EJ.DatePicker>
|
Not Applicable
|
Enable/Disable the animation
|
Property: enableAnimation
<EJ.DatePicker id="datepicker" enableAnimation={false} ></EJ.DatePicker>
|
Not Applicable
|
Highlight dates
|
Property: highlightSection
<EJ.DatePicker id="datepicker" highlightSection="month" ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent>
highlightDate(args) {
if (args.date.getDate() === 10) {
args.element.classList.add('e-highlightweekend');
}
}
.e-highlightweekend {
background-color: #cfe9f3;
}
|
Highlight weekend
|
Property: highlightWeekend
<EJ.DatePicker id="datepicker" highlightWeekend={true} ></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent>
highlightDate(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
args.element.classList.add('e-highlightweekend');
}
}
.e-highlightweekend {
background-color: #cfe9f3;
}
|
Tooltip format
|
Property: tooltipFormat
<EJ.DatePicker id="datepicker" tooltipFormat="dd/MM/yyyy" ></EJ.DatePicker>
|
Not Applicable
|
Special dates
|
Property: specialDates
var specialdate = [ { date: new Date(), tooltip: "In Australia" }]
<EJ.DatePicker id="datepicker" specialDates={specialdate}></EJ.DatePicker>
|
Can be achieved by
<DatePickerComponent id="datepicker" renderDayCell={this.customDates} value='5/5/2017'></DatePickerComponent>
customDates(args) {
if (args.date.getDate() === 10) {
var 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
<EJ.DatePicker id="datepicker" focusIn={onFocus} ></EJ.DatePicker>
function onFocus() {
}
|
Event: focus
<DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent>
onFocus() {
}
|
FocusOut event
|
Event: focusOut
<EJ.DatePicker id="datepicker" focusOut={onFocus} ></EJ.DatePicker>
function onFocus() {
}
|
Event: blur
<DatePickerComponent id="datepicker" blur={this.onBlur.bind(this)}></DatePickerComponent>
onBlur() {
}
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
<DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent>
create(args){
this.focusIn();
}
|
FocusOut method
|
Not Applicable
|
Method: focusOut()
<DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent>
create(args){
this.focusIn();
this.focusOut();
}
|
Prevent popup close
|
Not Applicable
|
Event: Close
<DatePickerComponent id="datepicker" close={this.onClose.bind(this)}></DatePickerComponent>
onClose(args) {
args.cancel = true;
}
|
Prevent popup open
|
Not Applicable
|
Event: Open
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent>
onOpen(args) {
args.cancel = true;
}
|