Contents
- Date Selection
- Date Format
- Date Range
- Disabled Dates
- Customization
- Accessibility
- Persistence
- Common
- Globalization
- Strict Mode
- Open and Close
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Daterangepicker control
7 May 20256 minutes to read
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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { value: "11/1/2013 - 12/3/2019", }); ``` | property: value ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { dateFormat: "dd/MM/yyyy" }); ``` | property: format ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { minDate: new Date("1/1/2017") }); ``` | property: min ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ min: new Date("1/1/2017") }); daterangeObject.appendTo('#element'); ``` |
| Maximum date | property: maxDate ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { maxDate: new Date("1/1/2017") }); ``` | property: max ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ max: new Date("1/1/2017") }); daterangeObject.appendTo('#element'); ``` |
| Start date | property: startDate ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { startDate: new Date("1/1/2017") }); ``` | property: startDate ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ startDate: new Date("11/9/2017") }); daterangeObject.appendTo('#element'); ``` |
| End date | property: endDate ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { endDate: new Date("1/1/2017") }); ``` | property: endDate ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ endDate: new Date("11/21/2017") }); daterangeObject.appendTo('#element'); ``` |
| Preset ranges | property: ranges ```ts 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 ```ts 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() ```ts 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() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { }); daterangeObj.clearRanges(); ``` | Not Applicable |
| Get selected range | Method: getSelectedRange() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { startDate: new Date("11/9/2017"), endDate: new Date("11/21/2017") }); console.log(daterangeObj.clearRanges()); ``` | Method: getSelectedRange() ```ts 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() ```ts 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 ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { cssClass: "gradient-lime" }); ``` | property: cssClass ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ cssClass:"customCSS" }); daterangeObject.appendTo('#element'); ``` |
| Enable/Disable the DateRangePicker with TimePicker | property: enableTimePicker ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { enableTimePicker: true }); ``` | Not Applicable |
| Time format | property: timeFormat ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { timeFormat: "HH:mm" }); ``` | Not Applicable |
| Minimum days span | Not Applicable | property: minDays ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ minDays: 5 }); daterangeObject.appendTo('#element'); ``` |
| Maximum days span | Not Applicable | property: maxDays ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ maxDays: 10 }); daterangeObject.appendTo('#element'); ``` |
| Button text | property: buttonText ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { buttonText : { reset: "Reset",cancel: "Cancel",apply: "Apply"} }); ``` | Can be achieved by ```ts L10n.load({ 'en': { 'daterangepicker': { applyText: 'Apply', } }}); let daterangeObject: DateRangePicker = new DateRangePicker({ locale: 'en' }); daterangeObject.appendTo('#element'); ``` |
| Show/Hide the popup button | property: showPopupButton ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { showPopupButton: false }); ``` | Can be achieved by ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { showRoundedCorner: true }); ``` | Can be achieved by ```ts 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 ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ focus: onFocus }); daterangeObject.appendTo('#element'); function onFocus(args: FocusEventArgs) { /* code block*/} ``` |
| FocusOut event | Not Applicable | Event: blur ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ blur: onBlur }); daterangeObject.appendTo('#element'); function onBlur(args: BlurEventArgs) { /* code block*/} ``` |
| FocusIn method | Not Applicable | Method: focusIn() ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ value: new Date() }); daterangeObject.appendTo('#element'); daterangeObject.focusIn(); ``` |
| FocusOut method | Not Applicable | Method: focusOut() ```ts 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 ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { enablePersistence: true }); ``` | property: enablePersistence ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { width: 200 }); ``` | property: width ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ width: 200 }); daterangeObject.appendTo('#element'); ``` |
| Readonly | Not Applicable | property: readonly ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ readonly:true }); daterangeObject.appendTo('#element'); ``` |
| Show/Hide the clear button | Not Applicable | property: showClearButton ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ showClearButton: false }); daterangeObject.appendTo('#element'); ``` |
| Height | property: height ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { height: 35 }); ``` | Can be achieved by ```ts 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 ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ weekNumber: true }); daterangeObject.appendTo('#element'); ``` |
| Watermark text | property: watermarkText ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { watermarkText: "Enter date" }); ``` | property: placeholder ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ placeholder: 'Enter date' }); daterangeObject.appendTo('#element'); ``` |
| Enable/Disable | property: enabled ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { enabled: false }); ``` | property: enabled ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ enabled: false }); daterangeObject.appendTo('#element'); ``` |
| Disable the DateRangePicker | Method: disable() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { }); daterangeObj.disable(); ``` | Not Applicable |
| Enable the DateRangePicker | Method: enable() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { }); daterangeObj.enable(); ``` | Not Applicable |
| Enable/Disable the textbox editing | property: allowEdit ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { allowEdit: false }); ``` | property: allowEdit ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ allowEdit: false }); daterangeObject.appendTo('#element'); ``` |
| Specify the placeholder text behavior | Not Applicable | property: floatLabelType ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ placeholder: 'Enter date', floatLabelType: 'Auto' }); daterangeObject.appendTo('#element'); ``` |
| zIndex | Not Applicable | property: zIndex ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ zIndex: 100 }); daterangeObject.appendTo('#element'); ``` |
| Specify the date range separator | property: separator ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { separator : "$" }); ``` | property: separator ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ separator : "$" }); daterangeObject.appendTo('#element'); ``` |
Globalization
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Locale | property: locale ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { locale: "en-US" }); ``` | property: locale ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ locale: 'en' }); daterangeObject.appendTo('#element'); ``` |
| First day of week | Not Applicable | property: firstDayOfWeek ```ts 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 ```ts 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 ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { close: function (args) { /* code block*/} }); ``` | Event: close ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ close: function (args: PreventableEventArgs) { /* code block*/} }); daterangeObject.appendTo('#element'); ``` |
| Hide | Method: popupHide() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { }); daterangeObj.popupHide(); ``` | Method: hide() ```ts let daterangeObject: DateRangePicker = new DateRangePicker(); daterangeObject.appendTo('#element'); daterangeObject.show(); daterangeObject.hide(); ``` |
| Open | Event: open ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), { open: function (args) { /* code block*/} }); ``` | Event: open ```ts let daterangeObject: DateRangePicker = new DateRangePicker({ open: function (args: PreventableEventArgs) { /* code block*/} }); daterangeObject.appendTo('#element'); ``` |
| Show | Method: popupShow() ```ts var daterangeObj = new ej.DateRangeTimePicker($("#daterangepicker"), {}); daterangeObj.popupShow(); ``` | Method: show() ```ts let daterangeObject: DateRangePicker = new DateRangePicker(); daterangeObject.appendTo('#element'); daterangeObject.show(); ``` |