Search results

Migration from Essential JS 1 in JavaScript DateRangePicker control

This article describes the API migration process of DateRangePicker 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 daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    value: "11/1/2013 - 12/3/2019",
});
property: value
let daterangeObject: DateRangePicker = new DateRangePicker({
    value: [new Date("10/07/2017"), new Date("2/2/2019")]
});
daterangeObject.appendTo('#element');

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format property: dateFormat
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    dateFormat: "dd/MM/yyyy"
});
property: format
let daterangeObject: DateRangePicker = new DateRangePicker({
    format: 'dd\'\/\'MMM\'\/\'yy hh:mm a',
    startDate: new Date("11/9/2017"),
    endDate: new Date("11/21/2017")
});
daterangeObject.appendTo('#element');

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date property: minDate
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    minDate: new Date("1/1/2017")
});
property: min
let daterangeObject: DateRangePicker = new DateRangePicker({
    min: new Date("1/1/2017")
});
daterangeObject.appendTo('#element');
Maximum date property: maxDate
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    maxDate: new Date("1/1/2017")
});
property: max
let daterangeObject: DateRangePicker = new DateRangePicker({
    max: new Date("1/1/2017")
});
daterangeObject.appendTo('#element');
Start date property: startDate
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    startDate: new Date("1/1/2017")
});
property: startDate
let daterangeObject: DateRangePicker = new DateRangePicker({
    startDate: new Date("11/9/2017")
});
daterangeObject.appendTo('#element');
End date property: endDate
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    endDate: new Date("1/1/2017")
});
property: endDate
let daterangeObject: DateRangePicker = new DateRangePicker({
    endDate: new Date("11/21/2017")
});
daterangeObject.appendTo('#element');
Preset ranges property: ranges
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    ranges: [  
    { label: "Today", range: [new Date(), new Date()] },
    { label: "Last 1 Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] },
    { label: "Last 1 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()] },
    { label: "Last 2 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 2)), new Date()] }]
});
property: presets
let daterangeObject: DateRangePicker = new DateRangePicker({
    presets: [
    { label: 'Today', start: new Date(), end: new Date() },
    { label: 'This Month', start: new Date(new Date().setDate(1)), end: new Date() },
    { label: 'Last Month', start: new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)), end: new Date() },
    { label: 'Last Year', start: new Date(new Date().getFullYear() - 1, 0, 1), end: new Date() }]
});
daterangeObject.appendTo('#element');
Add ranges Method: addRanges()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.addRanges("new Range", [new Date("11/12/2019"),new Date("11/12/2021")] );
Not Applicable
Clear ranges Method: clearRanges()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.clearRanges();
Not Applicable
Get selected range Method: getSelectedRange()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    startDate: new Date("11/9/2017"),
    endDate: new Date("11/21/2017")
});
console.log(daterangeObj.clearRanges());
Method: getSelectedRange()
let daterangeObject: DateRangePicker = new DateRangePicker({
    startDate: new Date("11/9/2017"),
    endDate: new Date("11/21/2017")
});
daterangeObject.appendTo('#element');
console.log(daterangeObject.getSelectedRange());
Set date range Method: setRange()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]);
Not Applicable

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates Not Applicable Can be achieved by
let daterangeObject: DateRangePicker = new DateRangePicker({
    renderDayCell: disableDate
});
daterangeObject.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
cssClass property: cssClass
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    cssClass: "gradient-lime"
});
property: cssClass
let daterangeObject: DateRangePicker = new DateRangePicker({
    cssClass:"customCSS"
});
daterangeObject.appendTo('#element');
Enable/Disable the DateRangePicker with TimePicker property: enableTimePicker
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    enableTimePicker: true
});
Not Applicable
Time format property: timeFormat
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    timeFormat: "HH:mm"
});
Not Applicable
Minimum days span Not Applicable property: minDays
let daterangeObject: DateRangePicker = new DateRangePicker({
    minDays: 5
});
daterangeObject.appendTo('#element');
Maximum days span Not Applicable property: maxDays
let daterangeObject: DateRangePicker = new DateRangePicker({
    maxDays: 10
});
daterangeObject.appendTo('#element');
Button text property: buttonText
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    buttonText : {  reset: "Reset",cancel: "Cancel",apply: "Apply"}
});
Can be achieved by
L10n.load({ 'en': {   'daterangepicker': { applyText: 'Apply',  } }});
let daterangeObject: DateRangePicker = new DateRangePicker({
    locale: 'en'
});
daterangeObject.appendTo('#element');
Show/Hide the popup button property: showPopupButton
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    showPopupButton: false
});
Can be achieved by
let daterangeObject: DateRangePicker = new DateRangePicker({
    focus: onFocus
});
daterangeObject.appendTo('#element');
function onFocus(args: FocusEventArgs) {
    daterangeObject.show();
.e-daterangepicker .e-control-wrapper .e-input-group-icon.e-range-icon{
    display: none;
}
Enable/Disable the rounded corner property: showRoundedCorner
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    showRoundedCorner: true
});
Can be achieved by
let daterangeObject: DateRangePicker = new DateRangePicker({
    cssClass: 'e-custom-style'
});
daterangeObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
    border-radius: 4px;
}
FocusIn event Not Applicable Event: focus
let daterangeObject: DateRangePicker = new DateRangePicker({
    focus: onFocus
});
daterangeObject.appendTo('#element');
function onFocus(args: FocusEventArgs) { /* code block*/}
FocusOut event Not Applicable Event: blur
let daterangeObject: DateRangePicker = new DateRangePicker({
    blur: onBlur
});
daterangeObject.appendTo('#element');
function onBlur(args: BlurEventArgs) { /* code block*/}
FocusIn method Not Applicable Method: focusIn()
let daterangeObject: DateRangePicker = new DateRangePicker({
    value: new Date()
});
daterangeObject.appendTo('#element');
daterangeObject.focusIn();
FocusOut method Not Applicable Method: focusOut()
let daterangeObject: DateRangePicker = new DateRangePicker({
    value: new Date()
});
daterangeObject.appendTo('#element');
daterangeObject.focusOut();

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Not Applicable property: enableRtl
let daterangeObject: DateRangePicker = new DateRangePicker({
    enableRtl: true
});
daterangeObject.appendTo('#element');

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence property: enablePersistence
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    enablePersistence: true
});
property: enablePersistence
let daterangeObject: DateRangePicker = new DateRangePicker({
    enablePersistence: true,
    startDate: new Date("11/9/2017"),
    endDate: new Date("11/21/2017")
});
daterangeObject.appendTo('#element');

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width property: width
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
   width: 200
});
property: width
let daterangeObject: DateRangePicker = new DateRangePicker({
    width: 200
});
daterangeObject.appendTo('#element');
Readonly Not Applicable property: readonly
let daterangeObject: DateRangePicker = new DateRangePicker({
    readonly:true
});
daterangeObject.appendTo('#element');
Show/Hide the clear button Not Applicable property: showClearButton
let daterangeObject: DateRangePicker = new DateRangePicker({
    showClearButton: false
});
daterangeObject.appendTo('#element');
Height property: height
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
  height: 35
});
Can be achieved by
let daterangeObject: DateRangePicker = new DateRangePicker({
    cssClass:"e-custom-style"
});
daterangeObject.appendTo('#element');
.e-daterangepicker .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group{
    height: 35px;
}
Enable/Disable the week number Not Applicable property: weekNumber
let daterangeObject: DateRangePicker = new DateRangePicker({
    weekNumber: true
});
daterangeObject.appendTo('#element');
Watermark text property: watermarkText
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
  watermarkText: "Enter date"
});
property: placeholder
let daterangeObject: DateRangePicker = new DateRangePicker({
    placeholder: 'Enter date'
});
daterangeObject.appendTo('#element');
Enable/Disable property: enabled
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
  enabled: false
});
property: enabled
let daterangeObject: DateRangePicker = new DateRangePicker({
    enabled: false
});
daterangeObject.appendTo('#element');
Disable the DateRangePicker Method: disable()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.disable();
Not Applicable
Enable the DateRangePicker Method: enable()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.enable();
Not Applicable
Enable/Disable the textbox editing property: allowEdit
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
     allowEdit: false
});
property: allowEdit
let daterangeObject: DateRangePicker = new DateRangePicker({
    allowEdit: false
});
daterangeObject.appendTo('#element');
Specify the placeholder text behavior Not Applicable property: floatLabelType
let daterangeObject: DateRangePicker = new DateRangePicker({
    placeholder: 'Enter date',
    floatLabelType: 'Auto'
});
daterangeObject.appendTo('#element');
zIndex Not Applicable property: zIndex
let daterangeObject: DateRangePicker = new DateRangePicker({
    zIndex: 100
});
daterangeObject.appendTo('#element');
Specify the date range separator property: separator
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    separator : "$"
});
property: separator
let daterangeObject: DateRangePicker = new DateRangePicker({
    separator : "$"
});
daterangeObject.appendTo('#element');

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale property: locale
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    locale: "en-US"
});
property: locale
let daterangeObject: DateRangePicker = new DateRangePicker({
    locale: 'en'
});
daterangeObject.appendTo('#element');
First day of week Not Applicable property: firstDayOfWeek
let daterangeObject: DateRangePicker = new DateRangePicker({
    firstDayOfWeek: 2
});
daterangeObject.appendTo('#element');

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Not Applicable property: strictMode
let daterangeObject: DateRangePicker = new DateRangePicker({
    strictMode: true
});
daterangeObject.appendTo('#element');

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    close: function (args) { /* code block*/}
});
Event: close
let daterangeObject: DateRangePicker = new DateRangePicker({
    close: function (args: PreventableEventArgs) { /* code block*/}
});
daterangeObject.appendTo('#element');
Hide Method: popupHide()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
});
daterangeObj.popupHide();
Method: hide()
let daterangeObject: DateRangePicker = new DateRangePicker();
daterangeObject.appendTo('#element');
daterangeObject.show();
daterangeObject.hide();
Open Event: open
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {
    open: function (args) { /* code block*/}
});
Event: open
let daterangeObject: DateRangePicker = new DateRangePicker({
    open: function (args: PreventableEventArgs) { /* code block*/}
});
daterangeObject.appendTo('#element');
Show Method: popupShow()
var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {});
daterangeObj.popupShow();
Method: show()
let daterangeObject: DateRangePicker = new DateRangePicker();
daterangeObject.appendTo('#element');
daterangeObject.show();