| 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
```
<DatePickerComponent id="datepicker" renderDayCell={this.onRenderCell.bind(this)}></DatePickerComponent>
onRenderCell() {/** code block */}
```
|
|
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
```
.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
```
.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
```
```
|
Can be achieved by
```
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
```
```
|
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
```
```
|
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() {
/** code block */
}
```
|
Event: focus
```
<DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent>
onFocus() {
/** code block */
}
```
|
|
FocusOut event
|
Event: focusOut
```
<EJ.DatePicker id="datepicker" focusOut={onFocus} ></EJ.DatePicker>
function onFocus() {
/** code block */
}
```
|
Event: blur
```
<DatePickerComponent id="datepicker" blur={this.onBlur.bind(this)}></DatePickerComponent>
onBlur() {
/** code block */
}
```
|
|
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) {
/*Triggers when the popup gets close*/
args.cancel = true;
}
```
|
|
Prevent popup open
|
Not Applicable
|
Event: Open
```
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent>
onOpen(args) {
/*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
```
<EJ.DatePicker id="datepicker" enableRTL={true} ></EJ.DatePicker>
```
|
Property: enableRtl
```
<DatePickerComponent id="datepicker" enableRtl={true}></DatePickerComponent>
```
|
## Persistence
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Enable/Disable the persistence
|
Property: enablePersistence
```
<EJ.DatePicker id="datepicker" enablePersistence={true} ></EJ.DatePicker>
```
|
Property: enablePersistence
```
<DatePickerComponent id="datepicker" enablePersistence={true}></DatePickerComponent>
```
|
## Validation
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Validation rules
|
Property: validationRules
```
var validationRules = {required: {true}};
$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
<EJ.DatePicker id="timepicker" validationRules= {validationRules} ></EJ.DatePicker>
```
|
Can be achieved by
```
var options = { rules: { 'datepicker': { required: true } } };
var formObject = new ej.inputs.FormValidator('#form-element', options);
```
|
|
Validation message
|
Property: validationMessage
```
var validationRules = {required: {true}};
var validationMessage = {required: "Required value"};
$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
<EJ.DatePicker id="timepicker" validationRules= {validationRules} validationMessage= {validationMessage} ></EJ.DatePicker>
```
|
Can be achieved by
```
var options = { rules: { 'datepicker': { required: true } },
customPlacement: (inputElement, errorElement) => {
inputElement.parentElement.parentElement.appendChild(errorElement);
}
var formObject = new ej.inputs.FormValidator('#form-element', options);
```
|
## Common
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Width
|
Property: width
```
```
|
Property: width
```
```
|
|
Readonly
|
Property: readonly
```
<EJ.DatePicker id="datepicker" readOnly={true} ></EJ.DatePicker>
```
|
Property: readonly
```
<DatePickerComponent id="datepicker" readonly={true}></DatePickerComponent>
```
|
|
Show/Hide the clear button
|
Not Applicable
|
Property: showClearButton
```
<DatePickerComponent id="datepicker" showClearButton={false}></DatePickerComponent>
```
|
|
Height
|
Property: height
```
```
|
Can be achieved by
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
```
|
|
Html Attributes
|
Property: HtmlAttributes
```
var htmlAttributes = {required:"required"}
<EJ.TimePicker id="timepicker" htmlAttributes = {htmlAttributes} ></EJ.TimePicker>
```
|
Not Applicable
|
|
Enable/Disable the week number
|
Property: weekNumber
```
<EJ.DatePicker id="datepicker" weekNumber={true} ></EJ.DatePicker>
```
|
Property: weekNumber
```
<DatePickerComponent id="datepicker" weekNumber={true}></DatePickerComponent>
```
|
|
Watermark text
|
Property: watermarkText
```
<EJ.DatePicker id="datepicker" watermarkText="enter a date' ></EJ.DatePicker>
```
|
Property: placeholder
```
```
|
|
Disable/Enable
|
Property: enabled
```
<EJ.DatePicker id="datepicker" enabled={false}></EJ.DatePicker>
```
|
Property: enabled
```
<DatePickerComponent id="datepicker" enabled={false}></DatePickerComponent>
```
|
|
Disable the DatePicker
|
Method: disable()
```
<EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker>
function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.disable();
}
```
|
Not Applicable
|
|
Enable the DatePicker
|
Method: enable()
```
<EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker>
function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.enable();
}
```
|
Not Applicable
|
|
Enable/Disable the textBox editing
|
Property: allowEdit
```
<EJ.DatePicker id="datepicker" allowEdit={true} ></EJ.DatePicker>
```
|
Property: allowEdit
```
<DatePickerComponent id="datepicker" allowEdit={false}></DatePickerComponent>
```
|
|
zIndex
|
Not Applicable
|
Property: zIndex
```
```
|
|
Specify the placeholder text behavior
|
Not Applicable
|
Property: floatLabelType
```
```
|
</table>
## Globalization
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Locale
|
Property: locale
```
```
|
Property: locale
```
```
|
|
First day of week
|
Property: startDay
```
<EJ.DatePicker id="datepicker" startDay={3} ></EJ.DatePicker>
```
|
Property: firstDayOfWeek
```
<DatePickerComponent firstDayOfWeek={5}></DatePickerComponent>
```
|
## Strict Mode
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Strict mode
|
Property: enableStrictMode
```
<EJ.DatePicker id="datepicker" enableStrictMode={true} ></EJ.DatePicker>
```
|
Property: strictMode
```
<DatePickerComponent id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" strictMode={true}></DatePickerComponent>
```
|
## Open and Close
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Close
|
Event: Close
```
<EJ.DatePicker id="datepicker" close={onClose} ></EJ.DatePicker>
function onClose() { /** code block */ }
```
|
Event: Close
```
<DatePickerComponent id="datepicker" close={this.onClose.bind(this)}></DatePickerComponent>
onClose() { /** code block */ }
```
|
|
Hide
|
Method: hide()
```
<EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker>
function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
dateObject.hide();
}
```
|
Method: hide()
```
<DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent>
onCreate(args){
this.show();
this.hide();
}
```
|
|
Open
|
Event: Open
```
<EJ.DatePicker id="datepicker" open={onOpen} ></EJ.DatePicker>
function onOpen() {/** code block */ }
```
|
Event: Open
```
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent>
onOpen() {/** code block */ }
```
|
|
Show
|
Method: show()
```
<EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker>
function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
}
```
|
Method: show()
```
<DatePickerComponent id="datepicker" created={this.create.bind(this)} ></DatePickerComponent>
create(args){
this.show();
}
```
|
## View Navigation
| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Navigate to specific month
|
Not Applicable
|
Method: navigateTo()
```
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)} ></DatePickerComponent>
onOpen(args){
this.navigateTo('Year', new Date("03/18/2018"));
}
```
|
|
Navigation callback
|
Event: Navigate
```
<EJ.DatePicker id="datepicker" navigate={onNavigate} ></EJ.DatePicker>
onNavigate() {/** code block */ }
```
|
Event: Navigated
```
<DatePickerComponent id="datepicker" navigated={this.onNavigated.bind(this)} ></DatePickerComponent>
onNavigated() {/** code block */ }
```
|
|
Enable/Disable the drill down
|
Property: allowDirllDown
```
<EJ.DatePicker id="datepicker" allowDirllDown={true} ></EJ.DatePicker>
```
|
Not Applicable
|