Search results

Migration from Essential JS 1

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
var dateObj = new ej.DatePicker($("#datepicker"), {
    value: new Date("5/5/2014")
});
property: value
let datepickerObject: DatePicker = new DatePicker({
    value: new Date("05/11/2017")
});
datepickerObject.appendTo('#element');

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format property: dateFormat
var dateObj = new ej.DatePicker($("#datepicker"), {
    dateFormat: "dd/MM/yyyy"
});
property: format
let datepickerObject: DatePicker = new DatePicker({
    format: 'yyyy-MM-dd'
});
datepickerObject.appendTo('#element');
Day header format property: dayHeaderFormat
var dateObj = new ej.DatePicker($("#datepicker"), {
   dayHeaderFormat: ej.DatePicker.Header.Long
});
Not Applicable

Calendar Views

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

Date Range

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

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates property: blackoutDates
var dateObj = new ej.DatePicker($("#datepicker"), {
  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
let datepickerObject: DatePicker = new DatePicker({
    renderDayCell: disableDate
});
datepickerObject.appendTo('#element');

function disableDate(args: RenderDayCellEventArgs): void {
    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
var dateObj = new ej.DatePicker($("#datepicker"), {
   cssClass: "gradient-lime"
});
property: cssClass
let datepickerObject: DatePicker = new DatePicker({
    cssClass: 'e-custom-style'
});
datepickerObject.appendTo('#element');
Event callback for each cell creation Not Applicable Event: renderDayCell
let datepickerObject: DatePicker = new DatePicker({
    renderDayCell: onRenderCell
});
datepickerObject.appendTo('#element');
function onRenderCell(args: RenderDayCellEventArgs): void {
    /* code block */
}
Show/Hide the today button property: showFooter
var dateObj = new ej.DatePicker($("#datepicker"), {
  showFooter: false
});
property: showTodayButton
let datepickerObject: DatePicker = new DatePicker({
    showTodayButton: false
});
datepickerObject.appendTo('#element');
Show/Hide the other month dates property: showOtherMonths
var dateObj = new ej.DatePicker($("#datepicker"), {
   showOtherMonths: false
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker();

datepickerObject.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
var dateObj = new ej.DatePicker($("#datepicker"), {
   showDisabledRange: false,
    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)]
});
Not Applicable
Show/Hide the popup button property: showPopupButton
var dateObj = new ej.DatePicker($("#datepicker"), {
   showPopupButton: false
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    focus: onFocus
});
datepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs) {
    datepickerObject.show();
}
.e-datepicker .e-control-wrapper .e-input-group-icon.e-date-icon{
    display: none;
}
Enable /Disable the rounded corner property: showRoundedCorner
var dateObj = new ej.DatePicker($("#datepicker"), {
   showRoundedCorner: true
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    cssClass: 'e-custom-style'
});
datepickerObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group{
    border-radius: 4px;
}
Skip a month property: stepMonths
var dateObj = new ej.DatePicker($("#datepicker"), {
    stepMonths: 2
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    value: new Date("09/04/2019"),
    open:onOpen
});
datepickerObject.appendTo('#element');
function onOpen(args:any){
    datepickerObject.navigateTo('Year', new Date("03/18/2018"));
}
Show/Hide the tooltip property: showTooltip
var dateObj = new ej.DatePicker($("#datepicker"), {
     showTooltip: false
});
Not Applicable
Button text property: buttonText
var dateObj = new ej.DatePicker($("#datepicker"), {
     buttonText : "Now"
});
Can be achieved by
L10n.load({ 'en': {'datepicker': {today:'Now' }}});
let datepickerObject: DatePicker = new DatePicker({
    locale: 'en'
});
datepickerObject.appendTo('#element');
Display inline property: displayInline
var dateObj = new ej.DatePicker($("#datepicker"), {
    displayInline: true
});
Not Applicable
Enable/Disable the animation property: enableAnimation
var dateObj = new ej.DatePicker($("#datepicker"), {
    enableAnimation : false
});
Not Applicable
Highlight dates property: highlightSection
var dateObj = new ej.DatePicker($("#datepicker"), {
    highlightSection: "week"
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    renderDayCell: highlightDate
});
datepickerObject.appendTo('#element');
function highlightDate(args: RenderDayCellEventArgs): void {
    if (args.date.getDate() === 10) {
        args.element.classList.add('e-highlightweekend');
    }
}
.e-highlightweekend {
    background-color: #cfe9f3;
}
Highlight weekend property: highlightWeekend
var dateObj = new ej.DatePicker($("#datepicker"), {
    highlightWeekend : true
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    renderDayCell: highlightDate
});
datepickerObject.appendTo('#element');
function highlightDate(args: RenderDayCellEventArgs): void {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        args.element.classList.add('e-highlightweekend');
    }
}
.e-highlightweekend {
    background-color: #cfe9f3;
}
Tooltip format property: tooltipFormat
var dateObj = new ej.DatePicker($("#datepicker"), {
    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" }]

var dateObj = new ej.DatePicker($("#datepicker"), {
    specialDates : specialDays
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    renderDayCell: customDates,
    value: new Date('5/5/2017')
});
datepickerObject.appendTo('#element');
function customDates(args: RenderDayCellEventArgs) {
    if (args.date.getDate() === 10) {
        let span: HTMLElement;
        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
var dateObj = new ej.DatePicker($("#datepicker"), {
    focusIn: function (args) {/*code block*/}
});
Event: focus
let datepickerObject: DatePicker = new DatePicker({
    focus: onFocus
});
datepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs): void {
    /*code block*/
}
FocusOut event Event: focusOut
var dateObj = new ej.DatePicker($("#datepicker"), {
    focusOut: function (args) {/*code block*/}
});
Event: blur
let datepickerObject: DatePicker = new DatePicker({
    blur: onBlur
});
datepickerObject.appendTo('#element');
function onBlur(args: BlurEventArgs): void {
    /*code block*/
}
FocusIn method Not Applicable Method: focusIn()
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date'
});
datepickerObject.appendTo('#element');
datepickerObject.focusIn();
FocusOut method Not Applicable Method: focusOut()
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date'
});
datepickerObject.appendTo('#element');
datepickerObject.focusOut();
Prevent popup close Not Applicable Event: close
let datepickerObject: DatePicker = new DatePicker({
    close: function (args: PreventableEventArgs) {
        args.preventDefault();
    }
});
datepickerObject.appendTo('#element');
datepickerObject.show();
Prevent popup open Not Applicable Event: close
let datepickerObject: DatePicker = new DatePicker({
    open: function (args: PreventableEventArgs) {
        args.preventDefault();
    }
});
datepickerObject.appendTo('#element');
datepickerObject.show();

Accessibility

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

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence property: enablePersistence
var dateObj = new ej.DatePicker($("#datepicker"), {
    enablePersistence : true
});
property: enablePersistence
let datepickerObject: DatePicker = new DatePicker({
    enablePersistence : true
});
datepickerObject.appendTo('#element');

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules property: validationRules
var dateObj = new ej.DatePicker($("#datepicker"), {
    validationRules : {required : true}
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date',
    value: new Date()
});
datepickerObject.appendTo('#element');
let options: FormValidatorModel = {
    rules: {
        'datevalue': { required: true }
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);
Validation message property: validationMessage
var dateObj = new ej.DatePicker($("#datepicker"), {
    validationRules : {required : true},
    validationMessage : {required: "Required Date value" }
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date',
    value: new Date()
});
datepickerObject.appendTo('#element');
let options: FormValidatorModel = {
    rules: {
        'datevalue': { required: [true, 'Date value required']  }
    },
    customPlacement: function (inputElement, errorElement) {
        (<HTMLElement>inputElement).parentElement.parentElement.appendChild(errorElement);
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width property: width
var dateObj = new ej.DatePicker($("#datepicker"), {
    width: 200
});
property: width
let datepickerObject: DatePicker = new DatePicker({
    width: '200px'
});
datepickerObject.appendTo('#element');
Readonly property: readOnly
var dateObj = new ej.DatePicker($("#datepicker"), {
    readOnly : true
});
property: readonly
let datepickerObject: DatePicker = new DatePicker({
    readonly:true,
    value:new Date()
});
datepickerObject.appendTo('#element');
Show/Hide the clear button Not Applicable property: showClearButton
let datepickerObject: DatePicker = new DatePicker({
    showClearButton: false
});
datepickerObject.appendTo('#element');
Height property: height
var dateObj = new ej.DatePicker($("#datepicker"), {
    height: 35
});
Can be achieved by
let datepickerObject: DatePicker = new DatePicker({
    cssClass: 'e-custom-style'
});
datepickerObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
    height: 35px;
}
Html attributes property: htmlAttributes
var dateObj = new ej.DatePicker($("#datepicker"), {
    htmlAttributes : {required:"required"}
});
Not Applicable
Shoe/Hide the Week Number property: weekNumber
var dateObj = new ej.DatePicker($("#datepicker"), {
    weekNumber : true
});
property: weekNumber
let datepickerObject: DatePicker = new DatePicker({
    weekNumber:true
});
datepickerObject.appendTo('#element');
Watermark text property: watermarkText
var dateObj = new ej.DatePicker($("#datepicker"), {
    watermarkText: "Enter date"
});
property: placeholder
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date'
    });
datepickerObject.appendTo('#element');
Disable/Enable property: enabled
var dateObj = new ej.DatePicker($("#datepicker"), {
     enabled: false
});
property: enabled
let datepickerObject: DatePicker = new DatePicker({
    enabled:false
});
datepickerObject.appendTo('#element');
Disable the DatePicker Method: disable()
var dateObj = new ej.DatePicker($("#datepicker"), {
});
dateObj.disable();
Not Applicable
Enable the DatePicker Method: enable()
var dateObj = new ej.DatePicker($("#datepicker"), {
});
dateObj.enable();
Not Applicable
Enable/Disable the textbox editing property: allowEdit
var dateObj = new ej.DatePicker($("#datepicker"), {
    allowEdit : false
});
property: allowEdit
let datepickerObject: DatePicker = new DatePicker({
    allowEdit : false
});
datepickerObject.appendTo('#element');
zIndex Not Applicable property: zIndex
let datepickerObject: DatePicker = new DatePicker({
    zIndex: 100
});
datepickerObject.appendTo('#element');
Specify the placeholder text behavior Not Applicable property: floatLabelType
let datepickerObject: DatePicker = new DatePicker({
    placeholder: 'Enter date',
    floatLabelType: 'Auto'
});
datepickerObject.appendTo('#element');

Globalization

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

Strict Mode

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

Open and Close

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

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo()
let datepickerObject: DatePicker = new DatePicker({
    value: new Date("09/04/2019"),
    open:onOpen
});
datepickerObject.appendTo('#element');
function onOpen(args:any){
    datepickerObject.navigateTo('Year', new Date("03/18/2018"));
}
Navigation callback Event: navigate
var dateObj = new ej.DatePicker($("#datepicker"), {
    navigate: function (args) {/*code block*/}
});
Event: navigated
let datepickerObject: DatePicker = new DatePicker({
    navigated: onNavigate
});
datepickerObject.appendTo('#element');
function onNavigate(args: NavigatedEventArgs) {/*code block*/}
Drill down property: allowDrillDown
var dateObj = new ej.DatePicker($("#datepicker"), {
    allowDrillDown : true
});
Not Applicable