Search results

Migration from Essential JS 1 in React DatePicker component

01 Dec 2021 / 12 minutes to read

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
Copied to clipboard
<EJ.DatePicker id="datepicker" value='5/5/2019' ></EJ.DatePicker>
Property: value
Copied to clipboard
<DatePickerComponent id="datepicker" value='5/5/2019'></DatePickerComponent>

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format Property: dateFormat
Copied to clipboard
<EJ.DatePicker id="datepicker" dateFormat='yyyy/MM/dd' ></EJ.DatePicker>
Property: format
Copied to clipboard
<DatePickerComponent  id="datepicker" format="yyyy-MM-dd"></DatePickerComponent>
Day header format Property: dayHeaderFormat
Copied to clipboard
<EJ.DatePicker id="datepicker" dayHeaderFormat="long" ></EJ.DatePicker>
Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start view Property: startLevel
Copied to clipboard
<EJ.DatePicker id="datepicker" startLevel="year" ></EJ.DatePicker>
Property: start
Copied to clipboard
<DatePickerComponent id="datepicker" start="Decade"></DatePickerComponent>
Depth view Property: depthLevel
Copied to clipboard
<EJ.DatePicker id="datepicker" depthLevel="year" ></EJ.DatePicker>
Property: depth
Copied to clipboard
<DatePickerComponent id="datepicker" depth="Year"></DatePickerComponent>

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: minDate
Copied to clipboard
<EJ.DatePicker id="datepicker" minDate="5/5/2019" ></EJ.DatePicker>
Property: min
Copied to clipboard
<DatePickerComponent id="datepicker" min="6/6/2019"></DatePickerComponent>
Maximum date Property: maxDate
Copied to clipboard
<EJ.DatePicker id="datepicker" maxDate="5/5/2019" ></EJ.DatePicker>
Property: max
Copied to clipboard
<DatePickerComponent id="datepicker" max="8/8/2017"></DatePickerComponent>

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates Property: blackoutDates
Copied to clipboard
var 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)]

<EJ.DatePicker id="timepicker"  blackoutDates={blackoutDates} value="5/5/2016" ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" renderDayCell={this.disableDate.bind(this)}></DatePickerComponent>

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
Copied to clipboard
<EJ.DatePicker id="datepicker" cssClass="gradient-lime" ></EJ.DatePicker>
Property: cssClass
Copied to clipboard
<DatePickerComponent id="datepicker" cssClass='gradient-lime'></DatePickerComponent>
Event callback for each cell creation Not Applicable Event: renderDayCell
Copied to clipboard
<DatePickerComponent id="datepicker" renderDayCell={this.onRenderCell.bind(this)}></DatePickerComponent>

onRenderCell() {/** code block */}
Show/Hide the today button Property: showFooter
Copied to clipboard
<EJ.DatePicker id="datepicker" showFooter={false} ></EJ.DatePicker>
Property: showTodayButton
Copied to clipboard
<DatePickerComponent id="datepicker" showTodayButton ={false}></DatePickerComponent>
Show/Hide the other month dates Property: showOtherMonths
Copied to clipboard
<EJ.DatePicker id="datepicker" showOtherMonths={false} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker"></DatePickerComponent>

.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 date Property: showDisabledRange
Copied to clipboard
var 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)]

<EJ.DatePicker id="datepicker" showDisabledRange={false} blackoutDates={blackoutDates} ></EJ.DatePicker>
Not Applicable
Show/Hide the popup button Property: showPopupButton
Copied to clipboard
<EJ.DatePicker id="datepicker" showPopupButton={false} ></EJ.DatePicker>
Event: Focus
Copied to clipboard
<DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent>
onFocus(args) {
this.show();
}

.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
Enable/Disable the rounded corner Property: showRoundedCorner
Copied to clipboard
<EJ.DatePicker id="datepicker" showRoundedCorner={true} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" cssClass='e-customStyle'></DatePickerComponent>

.e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group {
border-radius: 4px;
}
Skip a month Property: stepMonths
Copied to clipboard
<EJ.DatePicker id="datepicker" stepMonths={3} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" value='5/5/2019' open={this.onOpen.bind(this)}></DatePickerComponent>

onOpen(args){
datepicker.navigateTo('Year', new Date("03/18/2028"));
}
Show/Hide the tooltip Property: showTooltip
Copied to clipboard
<EJ.DatePicker id="datepicker" showTooltip={false} ></EJ.DatePicker>
Not Applicable
Today button text Property: buttonText
Copied to clipboard
<EJ.DatePicker id="datepicker" buttonText="Now" ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" locale='de'></DatePickerComponent>

L10n.load({
'de': {
    'datepicker': { placeholder: 'Wählen Sie ein Datum aus',
    `today: 'heute' }
}
});
Display Inline Property: displayInline
Copied to clipboard
<EJ.DatePicker id="datepicker" displayInline={true} ></EJ.DatePicker>
Not Applicable
Enable/Disable the animation Property: enableAnimation
Copied to clipboard
<EJ.DatePicker id="datepicker" enableAnimation={false} ></EJ.DatePicker>
Not Applicable
Highlight dates Property: highlightSection
Copied to clipboard
<EJ.DatePicker id="datepicker"  highlightSection="month" ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker"  renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent>

highlightDate(args) {
if (args.date.getDate() === 10) {
    args.element.classList.add('e-highlightweekend');
}
}

.e-highlightweekend {
background-color: #cfe9f3;
}
Highlight weekend Property: highlightWeekend
Copied to clipboard
<EJ.DatePicker id="datepicker"  highlightWeekend={true} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker"  renderDayCell={this.highlightDate.bind(this)}></DatePickerComponent>

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
Copied to clipboard
<EJ.DatePicker id="datepicker"  tooltipFormat="dd/MM/yyyy" ></EJ.DatePicker>
Not Applicable
Special dates Property: specialDates
Copied to clipboard
var specialdate = [ { date: new Date(), tooltip: "In Australia" }]

<EJ.DatePicker id="datepicker"  specialDates={specialdate}></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker"  renderDayCell={this.customDates} value='5/5/2017'></DatePickerComponent>

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
Copied to clipboard
<EJ.DatePicker id="datepicker"  focusIn={onFocus} ></EJ.DatePicker>

function onFocus() {
/** code block */
}
Event: focus
Copied to clipboard
<DatePickerComponent id="datepicker" focus={this.onFocus.bind(this)}></DatePickerComponent>

onFocus() {
/** code block */  
}
FocusOut event Event: focusOut
Copied to clipboard
<EJ.DatePicker id="datepicker"  focusOut={onFocus} ></EJ.DatePicker>

function onFocus()  {
/** code block */
}
Event: blur
Copied to clipboard
<DatePickerComponent id="datepicker" blur={this.onBlur.bind(this)}></DatePickerComponent>

onBlur()  {
   /** code block */
}
FocusIn method Not Applicable Method: focusIn()
Copied to clipboard
<DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent>

create(args){
this.focusIn();
}
FocusOut method Not Applicable Method: focusOut()
Copied to clipboard
<DatePickerComponent id="datepicker" created={this.create.bind(this)}></DatePickerComponent>

create(args){
this.focusIn();
this.focusOut();
}
Prevent popup close Not Applicable Event: Close
Copied to clipboard
<DatePickerComponent id="datepicker" close={this.onClose.bind(this)}></DatePickerComponent>

onClose(args) {
/*Triggers when the popup gets close*/
args.cancel = true;
}
Prevent popup open Not Applicable Event: Open
Copied to clipboard
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent>

onOpen(args) {
/*Triggers when the popup gets close*/
args.cancel = true;
}

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Property: enableRTL
Copied to clipboard
<EJ.DatePicker id="datepicker" enableRTL={true} ></EJ.DatePicker>
Property: enableRtl
Copied to clipboard
<DatePickerComponent id="datepicker" enableRtl={true}></DatePickerComponent>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence
Copied to clipboard
<EJ.DatePicker id="datepicker" enablePersistence={true} ></EJ.DatePicker>
Property: enablePersistence
Copied to clipboard
<DatePickerComponent id="datepicker" enablePersistence={true}></DatePickerComponent>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules
Copied to clipboard
var validationRules = {required: {true}};

$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
    $(error).insertAfter(element.closest(".e-widget"));
    }
});

<EJ.DatePicker id="timepicker" validationRules= {validationRules} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" floatLabelType='Always'> </DatePickerComponent>

var options = { rules: { 'datepicker': { required: true } } };
var formObject = new ej.inputs.FormValidator('#form-element', options);
Validation message Property: validationMessage
Copied to clipboard
var validationRules = {required: {true}};
var validationMessage = {required: "Required value"};

$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
    $(error).insertAfter(element.closest(".e-widget"));
}
});

<EJ.DatePicker id="timepicker" validationRules= {validationRules} validationMessage= {validationMessage} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" floatLabelType='Always'> </DatePickerComponent>

var options = { rules: { 'datepicker': { required: true } },
customPlacement: (inputElement, errorElement) => {
inputElement.parentElement.parentElement.appendChild(errorElement);
}
var formObject = new ej.inputs.FormValidator('#form-element', options);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width
Copied to clipboard
<EJ.DatePicker id="datepicker" width='300px' ></EJ.DatePicker>
Property: width
Copied to clipboard
<DatePickerComponent id="datepicker" width='300px'></DatePickerComponent>
Readonly Property: readonly
Copied to clipboard
<EJ.DatePicker id="datepicker" readOnly={true} ></EJ.DatePicker>
Property: readonly
Copied to clipboard
<DatePickerComponent id="datepicker" readonly={true}></DatePickerComponent>
Show/Hide the clear button Not Applicable Property: showClearButton
Copied to clipboard
<DatePickerComponent id="datepicker" showClearButton={false}></DatePickerComponent>
Height Property: height
Copied to clipboard
<EJ.DatePicker id="datepicker" height='50px' ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DatePickerComponent id="datepicker" cssClass='e-custom-style'></DatePickerComponent>

.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
Html Attributes Property: HtmlAttributes
Copied to clipboard
var htmlAttributes = {required:"required"}
  
<EJ.TimePicker id="timepicker"  htmlAttributes = {htmlAttributes} ></EJ.TimePicker>
Not Applicable
Enable/Disable the week number Property: weekNumber
Copied to clipboard
<EJ.DatePicker id="datepicker" weekNumber={true} ></EJ.DatePicker>
Property: weekNumber
Copied to clipboard
<DatePickerComponent id="datepicker" weekNumber={true}></DatePickerComponent>
Watermark text Property: watermarkText
Copied to clipboard
<EJ.DatePicker id="datepicker" watermarkText="enter a date' ></EJ.DatePicker>
Property: placeholder
Copied to clipboard
<DatePickerComponent id="datepicker" placeholder='Enter date'></DatePickerComponent>
Disable/Enable Property: enabled
Copied to clipboard
<EJ.DatePicker id="datepicker" enabled={false}></EJ.DatePicker>
Property: enabled
Copied to clipboard
<DatePickerComponent id="datepicker" enabled={false}></DatePickerComponent>
Disable the DatePicker Method: disable()
Copied to clipboard
<EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker>

function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.disable();
}
Not Applicable
Enable the DatePicker Method: enable()
Copied to clipboard
<EJ.DatePicker id="datepicker" create={onCreate}></EJ.DatePicker>

function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.enable();
}
Not Applicable
Enable/Disable the textBox editing Property: allowEdit
Copied to clipboard
<EJ.DatePicker id="datepicker" allowEdit={true} ></EJ.DatePicker>
Property: allowEdit
Copied to clipboard
<DatePickerComponent id="datepicker" allowEdit={false}></DatePickerComponent>
zIndex Not Applicable Property: zIndex
Copied to clipboard
<DatePickerComponent id="datepicker" zIndex="2000" ></DatePickerComponent>
Specify the placeholder text behavior Not Applicable Property: floatLabelType
Copied to clipboard
<DatePickerComponent id="datepicker" placeholder='Enter date' floatLabelType='Auto'></DatePickerComponent>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
Copied to clipboard
<EJ.DatePicker id="datepicker" locale="en-US" ></EJ.DatePicker>
Property: locale
Copied to clipboard
<DatePickerComponent id="datepicker" locale='en'></DatePickerComponent>
First day of week Property: startDay
Copied to clipboard
<EJ.DatePicker id="datepicker" startDay={3} ></EJ.DatePicker>
Property: firstDayOfWeek
Copied to clipboard
<DatePickerComponent firstDayOfWeek={5}></DatePickerComponent>

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode
Copied to clipboard
<EJ.DatePicker id="datepicker" enableStrictMode={true} ></EJ.DatePicker>
Property: strictMode
Copied to clipboard
<DatePickerComponent id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" strictMode={true}></DatePickerComponent>

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: Close
Copied to clipboard
<EJ.DatePicker id="datepicker" close={onClose} ></EJ.DatePicker>

function onClose() { /** code block */ }
Event: Close
Copied to clipboard
<DatePickerComponent id="datepicker"  close={this.onClose.bind(this)}></DatePickerComponent>

onClose() { /** code block */ }
Hide Method: hide()
Copied to clipboard
<EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker>

function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
dateObject.hide();
}
Method: hide()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent>

onCreate(args){
this.show();
this.hide();
}
Open Event: Open
Copied to clipboard
<EJ.DatePicker id="datepicker" open={onOpen} ></EJ.DatePicker>

function onOpen() {/** code block */ }
Event: Open
Copied to clipboard
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)}></DatePickerComponent>

onOpen() {/** code block */ }
Show Method: show()
Copied to clipboard
<EJ.DatePicker id="datepicker" create={onCreate} ></EJ.DatePicker>

function onCreate(args) {
var dateObject = $("#datepicker").data("ejDatePicker");
dateObject.show();
}
Method: show()
Copied to clipboard
<DatePickerComponent id="datepicker" created={this.create.bind(this)} ></DatePickerComponent>

create(args){
this.show();
}

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo()
Copied to clipboard
<DatePickerComponent id="datepicker" open={this.onOpen.bind(this)} ></DatePickerComponent>

onOpen(args){
this.navigateTo('Year', new Date("03/18/2018"));
}
Navigation callback Event: Navigate
Copied to clipboard
<EJ.DatePicker id="datepicker" navigate={onNavigate} ></EJ.DatePicker>

onNavigate() {/** code block */ }
Event: Navigated
Copied to clipboard
<DatePickerComponent id="datepicker" navigated={this.onNavigated.bind(this)} ></DatePickerComponent>

onNavigated() {/** code block */ }
Enable/Disable the drill down Property: allowDirllDown
Copied to clipboard
<EJ.DatePicker id="datepicker" allowDirllDown={true} ></EJ.DatePicker>
Not Applicable