This article describes the API migration process of DatePicker component from Essential JS 1 to Essential JS 2.
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
CSS Class
|
property: cssClass
```javascript
$("#datepicker").ejDatePicker({ cssClass: "gradient-lime"});
```
|
property: cssClass
```javascript
var datepicker = new ej.calendars.DatePicker({ cssClass: 'e-custom-style'});datepicker.appendTo('#element');
```
|
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
```javascript
var datepicker = new ej.calendars.DatePicker({
renderDayCell: onRenderCell
});
datepicker.appendTo('#element');
function onRenderCell(args) {/*code block*/}
```
|
|
Show/Hide the today button
|
property: showFooter
```javascript
$("#datepicker").ejDatePicker({ showFooter: false});
```
|
property: showTodayButton
```javascript
var datepicker = new ej.calendars.DatePicker({ showTodayButton: false});
datepicker.appendTo('#element');
```
|
|
Show?Hide the other month dates
|
property: showOtherMonths
```javascript
$("#datepicker").ejDatePicker({ showOtherMonths: false});
```
|
```javascript
var datepicker = new ej.calendars.DatePicker();
datepicker.appendTo('#element');
```
```
.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 range
|
property: showDisabledRange
```javascript
$("#datepicker").ejDatePicker({
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)]
showDisabledRange: false
});
```
|
Not Applicable
|
|
Show/Hide the popup button
|
property: showPopupButton
```javascript
$("#datepicker").ejDatePicker({ showPopupButton: false});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
focus: onFocus
});
datepicker.appendTo('#element');
function onFocus(args) {
datepicker.show();
}
```
```
.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
```
|
|
Enable/Disable rounded corner
|
property: showRoundedCorner
```javascript
$("#datepicker").ejDatePicker({ showRoundedCorner: true});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
cssClass: 'e-custom-style'
});
datepicker.appendTo('#element');
```
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
border-radius: 4px;
}
```
|
|
Skip a month
|
property: stepMonths
```javascript
$("#datepicker").ejDatePicker({ stepMonths: 2});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
value: new Date("09/04/2018"),
open:onOpen
});
datepicker.appendTo('#element');
function onOpen(args) {
datepicker.navigateTo('Year', new Date("03/18/2018"));
}
```
|
|
Show/Hide the tooltip
|
property: showTooltip
```javascript
$("#datepicker").ejDatePicker({ showTooltip: false});
```
|
Not Applicable
|
|
Today button text
|
property: buttonText
```javascript
$("#datepicker").ejDatePicker({ buttonText : "Now"});
```
|
Can be achieved by
```javascript
L10n.load({ 'en': { 'datepicker': {today:'Now' } }});
var datepicker = new ej.calendars.DatePicker({
locale: 'en'
});
datepicker.appendTo('#element');
```
|
|
Display inline
|
property: displayInline
```javascript
$("#datepicker").ejDatePicker({ displayInline: true});
```
|
Not Applicable
|
|
Enable/Disable the animation
|
property: enableAnimation
```javascript
$("#datepicker").ejDatePicker({ enableAnimation : false});
```
|
Not Applicable
|
|
Highlight dates
|
property: highlightSection
```javascript
$("#datepicker").ejDatePicker({ highlightSection: "week"});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
renderDayCell: highlightDate
});
datepicker.appendTo('#element');
function highlightDate(args) {
if (args.date.getDate() === 10) {
args.element.classList.add('e-highlightweekend');
}
}
```
```
.e-highlightweekend {
background-color: #cfe9f3;
}
```
|
|
Highlight weekend
|
property: highlightWeekend
```javascript
$("#datepicker").ejDatePicker({ highlightWeekend : true});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
renderDayCell: highlightDate
});
datepicker.appendTo('#element');
function 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
```javascript
$("#datepicker").ejDatePicker({ tooltipFormat : "dd/MM/yyyy"});
```
|
Not Applicable
|
|
Special Dates
|
property: specialDates
```javascript
specialDays = [ { date: new Date(2018, 09, 08), tooltip: "In Australia", iconClass: "flags sprite-Australia" }, { date: new Date(2018, 09, 21), tooltip: "In France", iconClass: "flags sprite-France" }]
$("#datepicker").ejDatePicker({ specialDates: specialDays});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({
renderDayCell: customDates,
value: new Date('5/5/2017')
});
datepicker.appendTo('#element');
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);
}
}
```
|
|
FocusIn event
|
Event: focusIn
```javascript
$("#datepicker").ejDatePicker({
focusIn: function (args) {/*code block*/}
});
```
|
Event: focus
```javascript
var datepicker = new ej.calendars.DatePicker({
focus: onFocus
});
datepicker.appendTo('#element');
function onFocus(args){ /*code block*/}
```
|
|
FocusOut event
|
Event: focusOut
```javascript
$("#datepicker").ejDatePicker({ focusOut: function (args) { /*code block*/}});
```
|
Event: blur
```javascript
var datepicker = new ej.calendars.DatePicker({
blur: onBlur
});
datepicker.appendTo('#element');
function onBlur(args){ /*code block*/}
```
|
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
```javascript
var datepicker = new ej.calendars.DatePicker({
placeholder: 'Enter date'
});
datepicker.appendTo('#element');
datepicker.focusIn();
```
|
|
FocusOut method
|
Not Applicable
|
Method: focusOut()
```javascript
var datepicker = new ej.calendars.DatePicker({
placeholder: 'Enter date'
});
datepicker.appendTo('#element');
datepicker.focusOut();
```
|
|
Prevent popup close
|
Not Applicable
|
Event: close
```javascript
var datepicker = new ej.calendars.DatePicker({
close: function (args) {
args.preventDefault();
}
});
datepicker.appendTo('#element');
datepicker.show();
```
|
|
Prevent popup open
|
Not Applicable
|
Event: open
```javascript
var datepicker = new ej.calendars.DatePicker({
open: function (args) {
args.preventDefault();
}
});
datepicker.appendTo('#element');
```
|
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
Width
|
property: width
```javascript
$("#datepicker").ejDatePicker({ width: 200});
```
|
property: width
```javascript
var datepicker = new ej.calendars.DatePicker({ width: '200px'});
datepicker.appendTo('#element');
```
|
|
Readonly
|
property: readOnly
```javascript
$("#datepicker").ejDatePicker({ readOnly : true});
```
|
property: readonly
```javascript
var datepicker = new ej.calendars.DatePicker({
readonly:true,
value:new Date()
});
datepicker.appendTo('#element');
```
|
|
Show/Hide the Clear Button
|
Not Applicable
|
property: showClearButton
```javascript
var datepicker = new ej.calendars.DatePicker({ showClearButton: true});
datepicker.appendTo('#element');
```
|
|
Height
|
property: height
```javascript
$("#datepicker").ejDatePicker({ height: 35});
```
|
Can be achieved by
```javascript
var datepicker = new ej.calendars.DatePicker({cssClass: 'e-custom-style'});
datepicker.appendTo('#element');
```
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group{ height: 35px;}
```
|
|
Html Attributes
|
property: htmlAttributes
```javascript
$("#datepicker").ejDatePicker({ htmlAttributes : {required:"required"}});
```
|
Not Applicable
|
|
Enable/Disable the Week Number
|
property: weekNumber
```javascript
$("#datepicker").ejDatePicker({ weekNumber : true});
```
|
property: weekNumber
```javascript
var datepicker = new ej.calendars.DatePicker({ weekNumber:true});
datepicker.appendTo('#element');
```
|
|
Watermark text
|
property: watermarkText
```javascript
$("#datepicker").ejDatePicker({ watermarkText: "Enter date"});
```
|
property: placeholder
```javascript
var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date'});
datepicker.appendTo('#element');
```
|
|
Disable/Enable
|
property: enabled
```javascript
$("#datepicker").ejDatePicker({ enabled: false});
```
|
property: enabled
```javascript
var datepicker = new ej.calendars.DatePicker({enabled:false});
datepicker.appendTo('#element');
```
|
|
Disable the DatePicker
|
Method: disable()
```javascript
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.disable();
```
|
Not Applicable
|
|
Enable the DatePicker
|
Method: enable()
```javascript
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.enable();
```
|
Not Applicable
|
|
Enable/Disable the textbox editing
|
property: allowEdit
```javascript
$("#datepicker").ejDatePicker({ allowEdit : true});
```
|
property: allowEdit
```javascript
var datepicker = new ej.calendars.DatePicker({ allowEdit : true});
datepicker.appendTo('#element');
```
|
|
zIndex
|
Not Applicable
|
property: zIndex
```javascript
var datepicker = new ej.calendars.DatePicker({ zIndex: 100});
datepicker.appendTo('#element');
```
|
|
Specify the placeholder text behavior
|
Not Applicable
|
property: floatLabelType
```javascript
var datepicker = new ej.calendars.DatePicker({
placeholder: 'Enter date',
floatLabelType: 'Auto'
});
datepicker.appendTo('#element');
```
|