Search results

Migration from Essential JS 1 in JavaScript (ES5) DatePicker control

This article describes the API migration process of DatePicker component from Essential JS 1 to Essential JS 2.

Date Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value property: value
$("#datepicker").ejDatePicker({  value: new Date("5/5/2014") });
property: value
var datepicker = new ej.calendars.DatePicker({ value: new Date("05/11/2017")});
datepicker.appendTo('#datepicker');

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format property: dateFormat
$("#datepicker").ejDatePicker({ dateFormat: "dd/MM/yyyy"});
property: format
var datepicker = new ej.calendars.DatePicker({
    value: new Date("05/11/2017");
    format: 'yyyy-MM-dd'});
datepicker.appendTo('#element');
Day header format property: dayHeaderFormat
$("#datepicker").ejDatePicker({ dayHeaderFormat: ej.DatePicker.Header.Short});
Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start property: startLevel
$("#datepicker").ejDatePicker({ startLevel: ej.DatePicker.Level.Year});
property: start
var datepicker = new ej.calendars.DatePicker({
    start:'Decade'});
datepicker.appendTo('#element');
Depth property: depthLevel
$("#datepicker").ejDatePicker({depthLevel: ej.DatePicker.Level.Year});
property: depth
var datepicker = new ej.calendars.DatePicker({
    depth:'Year'
});
datepicker.appendTo('#element');

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date property: minDate
$("#datepicker").ejDatePicker({
    minDate: new Date("5/1/2013")
});
property: min
var datepicker = new ej.calendars.DatePicker({
    min: new Date("5/1/2013")
});
datepicker.appendTo('#element');
Maximum date property: maxDate
$("#datepicker").ejDatePicker({ maxDate : new Date("5/30/2015")});
property: max
var datepicker = new ej.calendars.DatePicker({
    max : new Date("5/30/2015")
});
datepicker.appendTo('#element');

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates property: blackoutDates
$("#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)]
});
Can be achieved by
var datepicker = new ej.calendars.DatePicker({
    renderDayCell: disableDate
});
datepicker.appendTo('#element');
function disableDate(args) {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        args.isDisabled = true;  
    }
}

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class property: cssClass
$("#datepicker").ejDatePicker({ cssClass: "gradient-lime"});
property: cssClass
var datepicker = new ej.calendars.DatePicker({ cssClass: 'e-custom-style'});datepicker.appendTo('#element');
Event callback for each cell creation Not Applicable Event: renderDayCell
var datepicker = new ej.calendars.DatePicker({
    renderDayCell: onRenderCell
});
datepicker.appendTo('#element');

function onRenderCell(args) {/*code block*/}
Show/Hide the today button property: showFooter
$("#datepicker").ejDatePicker({ showFooter: false});
property: showTodayButton
var datepicker = new ej.calendars.DatePicker({ showTodayButton: false});
datepicker.appendTo('#element');
Show?Hide the other month dates property: showOtherMonths
$("#datepicker").ejDatePicker({ showOtherMonths: false});
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
$("#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
$("#datepicker").ejDatePicker({ showPopupButton: false});
Can be achieved by
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
$("#datepicker").ejDatePicker({ showRoundedCorner: true});
Can be achieved by
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
$("#datepicker").ejDatePicker({ stepMonths: 2});
Can be achieved by
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
$("#datepicker").ejDatePicker({ showTooltip: false});
Not Applicable
Today button text property: buttonText
$("#datepicker").ejDatePicker({ buttonText : "Now"});
Can be achieved by
L10n.load({  'en': { 'datepicker': {today:'Now' }  }});
var datepicker = new ej.calendars.DatePicker({
    locale: 'en'
});
datepicker.appendTo('#element');
Display inline property: displayInline
$("#datepicker").ejDatePicker({ displayInline: true});
Not Applicable
Enable/Disable the animation property: enableAnimation
$("#datepicker").ejDatePicker({ enableAnimation : false});
Not Applicable
Highlight dates property: highlightSection
$("#datepicker").ejDatePicker({ highlightSection: "week"});
Can be achieved by
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
$("#datepicker").ejDatePicker({ highlightWeekend : true});

Can be achieved by

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
$("#datepicker").ejDatePicker({ tooltipFormat : "dd/MM/yyyy"});
Not Applicable
Special Dates property: specialDates
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
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
$("#datepicker").ejDatePicker({
    focusIn: function (args) {/*code block*/}
});
Event: focus
var datepicker = new ej.calendars.DatePicker({
    focus: onFocus
});
datepicker.appendTo('#element');
function onFocus(args){ /*code block*/}
FocusOut event Event: focusOut
$("#datepicker").ejDatePicker({ focusOut: function (args) { /*code block*/}});
Event: blur
var datepicker = new ej.calendars.DatePicker({
    blur: onBlur
});
datepicker.appendTo('#element');
function onBlur(args){ /*code block*/}
FocusIn method Not Applicable Method: focusIn()
var datepicker = new ej.calendars.DatePicker({
    placeholder: 'Enter date'
});
datepicker.appendTo('#element');
datepicker.focusIn();
FocusOut method Not Applicable Method: focusOut()
var datepicker = new ej.calendars.DatePicker({
    placeholder: 'Enter date'
});
datepicker.appendTo('#element');
datepicker.focusOut();
Prevent popup close Not Applicable Event: close
var datepicker = new ej.calendars.DatePicker({
    close: function (args) {
        args.preventDefault();
    }
});
datepicker.appendTo('#element');
datepicker.show();
Prevent popup open Not Applicable Event: open
var datepicker = new ej.calendars.DatePicker({
    open: function (args) {
        args.preventDefault();
    }
});
datepicker.appendTo('#element');

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL property: enableRTL
$("#datepicker").ejDatePicker({
    enableRTL : true
});
property: enableRtl
var datepicker = new ej.calendars.DatePicker({
    enableRtl : true
});
datepicker.appendTo('#element');

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence property: enablePersistence
$("#datepicker").ejDatePicker({enablePersistence : true});
property: enablePersistence
var datepicker = new ej.calendars.DatePicker({
    enablePersistence : true
});
datepicker.appendTo('#element');

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules property: validationRules
$("#datepicker").ejDatePicker({ validationRules:{ required:true }});
Can be achieved by
var datepicker = new ej.calendars.DatePicker({
    placeholder: 'Enter date'
});
datepicker.appendTo('#element');
var options = {  rules: {   'datevalue': {    required: true }} }
var formObject: FormValidator = new FormValidator('#form-element', options);
Validation message property: validationMessage
$("#datepicker").ejDatePicker({
    validationRules:{ required:true },
    validationMessage:{ required: "Required Date value"}
});
Can be achieved by
var datepicker = new ej.calendars.DatePicker({
    placeholder: 'Enter date'
});

var options = {
    rules: {
        'datevalue': {    required: [true, 'Date value required'] }
    },
    customPlacement: function (inputElement, errorElement) {
        inputElement.parentElement.parentElement.appendChild(errorElement);
    }
};
    var formObject = new ej.inputs.FormValidator('#form-element', options);
    datepicker.appendTo('#element');

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width property: width
$("#datepicker").ejDatePicker({ width: 200});
property: width
var datepicker = new ej.calendars.DatePicker({ width: '200px'});
datepicker.appendTo('#element');
Readonly property: readOnly
$("#datepicker").ejDatePicker({ readOnly : true});
property: readonly
var datepicker = new ej.calendars.DatePicker({
    readonly:true,
    value:new Date()
});
datepicker.appendTo('#element');
Show/Hide the Clear Button Not Applicable property: showClearButton
var datepicker = new ej.calendars.DatePicker({ showClearButton: true});
datepicker.appendTo('#element');
Height property: height
$("#datepicker").ejDatePicker({ height: 35});
Can be achieved by
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
$("#datepicker").ejDatePicker({ htmlAttributes : {required:"required"}});
Not Applicable
Enable/Disable the Week Number property: weekNumber
$("#datepicker").ejDatePicker({ weekNumber : true});
property: weekNumber
var datepicker = new ej.calendars.DatePicker({ weekNumber:true});
datepicker.appendTo('#element');
Watermark text property: watermarkText
$("#datepicker").ejDatePicker({ watermarkText: "Enter date"});
property: placeholder
var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date'});
datepicker.appendTo('#element');
Disable/Enable property: enabled
$("#datepicker").ejDatePicker({ enabled: false});
property: enabled
var datepicker = new ej.calendars.DatePicker({enabled:false});
datepicker.appendTo('#element');
Disable the DatePicker Method: disable()
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.disable();
Not Applicable
Enable the DatePicker Method: enable()
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.enable();
Not Applicable
Enable/Disable the textbox editing property: allowEdit
$("#datepicker").ejDatePicker({ allowEdit : true});
property: allowEdit
var datepicker = new ej.calendars.DatePicker({ allowEdit : true});
datepicker.appendTo('#element');
zIndex Not Applicable property: zIndex
var datepicker = new ej.calendars.DatePicker({ zIndex: 100});
datepicker.appendTo('#element');
Specify the placeholder text behavior Not Applicable property: floatLabelType
var datepicker = new ej.calendars.DatePicker({
    placeholder: 'Enter date',
    floatLabelType: 'Auto'
});
datepicker.appendTo('#element');

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale property: locale
$("#datepicker").ejDatePicker({locale: "en-US"});
property: locale
var datepicker = new ej.calendars.DatePicker({ locale: 'en'});
datepicker.appendTo('#element');
First day of week property: startDay
$("#datepicker").ejDatePicker({ startDay: 2});
property: firstDayOfWeek
var datepicker = new ej.calendars.DatePicker({ firstDayOfWeek: 2});
datepicker.appendTo('#element');

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode property: enableStrictMode
$("#datepicker").ejDatePicker({ enableStrictMode : true});
property: strictMode
var datepicker = new ej.calendars.DatePicker({
    strictMode: true,
    value: new Date('5/28/2017'),
    min: new Date('5/5/2017'),
    max: new Date('5/25/2017')
});
datepicker.appendTo('#element');

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close
$("#datepicker").ejDatePicker({ close: function (args) { /*code block*/}});
Event: close
var datepicker = new ej.calendars.DatePicker({
    close: function (args) { /*code block*/}
});
datepicker.appendTo('#element');
Hide Method: hide()
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.hide();
Method: hide()
var datepicker = new ej.calendars.DatePicker({ value: new Date("05/11/2017")});datepicker.appendTo('#element');
datepicker.hide();
Open Event: open
$("#datepicker").ejDatePicker({open: function (args) { /*code block*/}});
Event: open
var datepicker = new ej.calendars.DatePicker({ open: function (args) { /*code block*/}});
datepicker.appendTo('#element');
Show Method: show()
$("#datepicker").ejDatePicker();
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.show();
Method: show()
var datepicker = new ej.calendars.DatePicker({ value: new Date("05/11/2017")});datepicker.appendTo('#element');
datepicker.show();

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo()
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"));
}
Navigation callback Event: navigate
$("#datepicker").ejDatePicker({ navigate: function (args) { /*code block*/}});
Event: navigated
var datepicker = new ej.calendars.DatePicker({navigated: onNavigate});
datepicker.appendTo('#element');
function onNavigate(args) { /*code block*/}
Enable/Disable the drill down property: allowDrillDown
$("#datepicker").ejDatePicker({ allowDrillDown : true});
Not Applicable