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
26 Apr 20236 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(); ``` |