| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
css Class
|
Property: css-class
HTML
<ej-date-picker id="date" css-class="gradient-lime"></ej-date-picker>
|
Property: cssClass
HTML
<ejs-datepicker id="date" cssClass="gradient-lime"></ejs-datepicker>
|
|
Render day cell
|
Not Applicable
|
Event: renderDayCell
HTML
<ejs-datepicker id="date" renderdaycell="onRenderCell"></ejs-datepicker>
<script>
function onRenderCell() { }
</script>
|
|
Show today button
|
Property: show-footer
HTML
<ej-date-picker id="date" show-footer="false"></ej-date-picker>
|
Property: showTodayButton
HTML
<ejs-datepicker id="date" showTodayButton="false"></ejs-datepicker>
|
|
Show other month dates
|
Property: show-other-months
HTML
<ej-date-picker id="date" show-other-months="false"></ej-date-picker>
|
HTML
<ejs-datepicker id="date"></ejs-datepicker>
<style>
.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;
}
</style>
|
|
Show disabled range
|
Property: show-disabled-range
HTML
<ej-date-picker id="date" show-disabled-range="false"></ej-date-picker>
|
Not Applicable
|
|
Show popup button
|
Property: show-popup-button
HTML
<ej-date-picker id="date" show-popup-button="false"></ej-date-picker>
|
Event: focus
HTML
<ejs-datepicker id="date" focus="onFocus"></ejs-datepicker>
<script>
function onFocus(args) {
var datepicker = document.getElementById("date").ej2_instances[0];
datepicker.show();
}
</script>
<style>
.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
</style>
|
|
Show rounded corner
|
Property: show-rounded-corner
HTML
<ej-date-picker id="date" show-rounded-corner="true"></ej-date-picker>
|
Property: cssClass
HTML
<ejs-datepicker id="date" cssclass="e-custom-style"></ejs-datepicker>
<style>
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
border-radius: 4px;
}
</style>
|
|
Skip a month
|
Property: step-months
HTML
<ej-date-picker id="date" step-months="2"></ej-date-picker>
|
Method: navigateTo()
HTML
<ejs-datepicker id="date" value="new DateTime(2018,09,04)" open="onOpen"></ejs-datepicker>
<script>
function onOpen(args) {
var datepicker = document.getElementById("date").ej2_instances[0];
datepicker.navigateTo('Year', new Date("03/18/2018"));
}
</script>
|
|
Show tooltip
|
Property: show-tooltip
HTML
<ej-date-picker id="date" show-tooltip="false"></ej-date-picker>
|
Not Applicable
|
|
Button text
|
Property: button-text
HTML
<ej-date-picker id="date" button-text="Now"></ej-date-picker>
|
Method: load()
HTML
<ejs-datepicker id="datepicker" locale="en"></ejs-datepicker>
<script>
document.addEventListener('DOMContentLoaded', function () {
datepicker = document.getElementById('datepicker').ej2_instances[0];
var L10n = ej.base.L10n;
L10n.load({
'en':
{
'datepicker': { today: 'Now' }
}
});
});
</script>
|
|
Display inline
|
Property: display-inline
HTML
<ej-date-picker id="date" tag-name="div" display-inline="true"></ej-date-picker>
|
Not Applicable
|
|
Enable animation
|
Property: enable-animation
HTML
<ej-date-picker id="date" enable-animation="false"></ej-date-picker>
|
Not Applicable
|
|
Highlight section
|
Property: highlight-section
HTML
<ej-date-picker id="date" highlight-section="Week"></ej-date-picker>
|
Event: renderDayCell
HTML
<ejs-datepicker id="datepicker" renderdaycell="highlightDate"></ejs-datepicker>
<script>
function highlightDate(args) {
if (args.date.getDate() === 10) {
args.element.classList.add('e-highlightweekend');
}
}
</script>
<style>
body.highcontrast #date_label {
color: white;
}
.e-highlightweekend {
background-color: #cfe9f3;
}
</style>
|
|
Highlight weekend
|
Property: highlight-weekend
HTML
<ej-date-picker id="date" highlight-weekend="true"></ej-date-picker>
|
Event: renderDayCell
HTML
<ejs-datepicker id="datepicker" renderdaycell="highlightDate"></ejs-datepicker>
<script>
function highlightDate(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
args.element.classList.add('e-highlightweekend');
}
}
</script>
<style>
body.highcontrast #date_label {
color: white;
}
.e-highlightweekend {
background-color: #cfe9f3;
}
</style>
|
|
Tooltip format
|
Property: tooltip-format
HTML
<ej-date-picker id="date" tooltip-format="dd/MM/yyyy"></ej-date-picker>
|
Not Applicable
|
|
Special Dates
|
Property: special-dates
HTML
<ej-date-picker id="date">
<e-special-dates>
<e-special-date date="1/1/2019" tooltip="In Australia" icon-class="flags sprite-Australia" />
<e-special-date date="1/2/2019" tooltip="In France" icon-class="flags sprite-France" />
</e-special-dates>
</ej-date-picker>
|
Event: renderDayCell
HTML
<ejs-datepicker id="datepicker" renderdaycell="customDates" value="new DateTime(2017,05,05)"></ejs-datepicker>
<script>
function 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);
}
}
</script>
|
|
Focus In event
|
Event: focus-in
HTML
<ej-date-picker id="date" focus-in="onFocus"></ej-date-picker>
<script>
function onFocus() { }
</script>
|
Event: focus
HTML
<ejs-datepicker id="date" focus="onFocus"></ejs-datepicker>
<script>
function onFocus() { }
</script>
|
|
Focus out event
|
Event: focus-out
HTML
<ej-date-picker id="date" focus-out="onFocusout"></ej-date-picker>
<script>
function onFocusout() { }
</script>
|
Event: blur
HTML
<ejs-datepicker id="date" blur="onBlur"></ejs-datepicker>
<script>
function onBlur() { }
</script>
|
|
Focus in method
|
Not Applicable
|
Method: focusIn()
HTML
<ejs-datepicker id="datepicker"></ejs-datepicker>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dateObject = document.getElementById("datepicker").ej2_instances[0];
dateObject.focusIn();
});
</script>
|
|
Focus out method
|
Not Applicable
|
Method: focusOut()
HTML
<ejs-datepicker id="datepicker"></ejs-datepicker>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dateObject = document.getElementById("datepicker").ej2_instances[0];
dateObject.focusOut();
});
</script>
|
|
Prevent close
|
Not Applicable
|
Event: close
HTML
<ejs-datepicker id="datepicker" close="onClose"></ejs-datepicker>
<script>
function onClose(args) {
args.cancel = true;
}
document.addEventListener('DOMContentLoaded', function () {
var dateObject = document.getElementById("datepicker").ej2_instances[0];
dateObject.show();
});
</script>
|
|
Prevent open
|
Not Applicable
|
Event: open
HTML
<ejs-datepicker id="datepicker" open="onOpen"></ejs-datepicker>
<script>
function onOpen(args) {
args.cancel = true;
}
</script>
|