Migration from Essential JS 1 in React DateRangePicker component

<EJ.DateRangePicker id="daterangepicker" value="5/5/2019-6/6/2019" ></EJ.DateRangePicker>

this.value = [new Date('1/15/2017'), new Date("1/15/2017")];

<DateRangePickerComponent id="daterangepicker" value={this.value}  ></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" dateFormat="dd/MM/yyyy" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" format="dd/MMM/yy hh:mm a" ></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" minDate="7/7/2019" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" min="7/7/2019" ></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" maxDate="7/7/2019" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" max="7/7/2019" ></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" startDate="7/7/2019" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" ></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" endDate="7/7/2019" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" endDate="8/8/2019 ></DateRangePickerComponent>

var ranges = [{ label: "Today", range: [new Date(), new Date()] },{ label: "Last Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] }]

<EJ.DateRangePicker id="timepicker"  ranges={ranges}></EJ.DateRangePicker>

this.weekStart = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());

this.weekEnd = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate() - (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString());

<DateRangePickerComponent placeholder='Select a range'>
    <PresetsDirective >
        <PresetDirective label="This Week" start={this.weekStart} end={this.weekEnd}> </PresetDirective>
     </PresetsDirective>
</DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    dateObj.addRanges("new Range", [new Date("11/12/2019"), new Date("11/12/2021")]);
}

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    dateObj.clearRanges();
}

<EJ.DateRangePicker id="daterangepicker" startDate="5/5/2019" endDate="8/8/2019" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    console.log(dateObj.getSelectedRange());
}

<DateRangePickerComponent id="daterangepicker" startDate="7/7/2019" endDate="8/8/2019"
created ={this.onCreate.bind(this)} ></DateRangePickerComponent>

onCreate (args) {
    console.log(this.getSelectedRange());
}

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var dateObj = $("#daterangepicker").data("ejDateRangePicker");
    dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]);
}

<DateRangePickerComponent id="daterangepicker" renderDayCell={this.disableDaterange.bind(this)}></DateRangePickerComponent>

disableDaterange(args) {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        args.isDisabled = true;
    }
}

<EJ.DateRangePicker id="daterangepicker" cssClass="gradient-lime"></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" cssClass="gradient-lime"></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" enableTimePicker={true} ></EJ.DateRangePicker>

<EJ.DateRangePicker id="daterangepicker" timeFormat="HH:mm" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" minDays={5}></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" maxDays={5}></DateRangePickerComponent>

var buttonText = { reset: "Again", cancel: "Cut", apply: "Ok" }

<EJ.DateRangePicker id="timepicker"  buttonText={buttonText}></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" locale="en"></DateRangePickerComponent>

L10n.load({
    'en': {
        'daterangepicker': { applyText: 'Apply' }
    }
});

<EJ.DateRangePicker id="daterangepicker" showPopupButton={false} ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" focus={this.onFocus.bind(this)}></DateRangePickerComponent>

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

.e-control-wrapper .e-input-group-icon.e-range-icon {
    display: none;
}

<EJ.DateRangePicker id="daterangepicker" showRoundedCorner={true} ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" cssClass="e-custom-style"></DateRangePickerComponent>

.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
    border-radius: 4px;
}

<DateRangePickerComponent id="daterangepicker" focus={this.onFocus.bind(this)}></DateRangePickerComponent>

onFocus(args) {/** code block */ }

<DateRangePickerComponent id="daterangepicker" blur={this.onBlur.bind(this)}></DateRangePickerComponent>

onBlur(args) {/** code block */ }

<DateRangePickerComponent id="daterangepicker" created={this.onCreate.bind(this)}></DateRangePickerComponent>

onCreate(args) {
    this.focusIn();
}

<DateRangePickerComponent id="daterangepicker" created={this.onCreate.bind(this)}></DateRangePickerComponent>

onCreate(args) {
    this.focusOut();
}

<DateRangePickerComponent id="daterangepicker" enableRtl={true}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" enablePersistence={true} ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" enablePersistence={true}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" width="200px" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" width="200px"></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" readonly={true}></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" showClearButton={true}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" height="35px" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" cssClass="e-custom-style"></DateRangePickerComponent>

.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
    height: 35px;
}

<DateRangePickerComponent id="daterangepicker" weekNumber={true}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" watermarkText="Select a Range" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" placeholder="Select a Range"></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" enabled={false} ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" enabled={false}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObj.disable();`
}

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate() {
    var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObj.enable();
}

<EJ.DateRangePicker id="daterangepicker" allowEdit={false}></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" allowEdit={true}></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" floatLabelType="Auto"></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" zIndex="2000"></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" separator="#" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" separator="@"></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" locale="en-Us" ></EJ.DateRangePicker>

<DateRangePickerComponent id="daterangepicker" locale="en"></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" firstDayOfWeek={5}></DateRangePickerComponent>

<DateRangePickerComponent id="daterangepicker" strictMode={true}></DateRangePickerComponent>

<EJ.DateRangePicker id="daterangepicker" close={onClose} ></EJ.DateRangePicker>

function onClose() {/** code block */}

<DateRangePickerComponent id="daterangepicker" close={this.onClose.bind(this)}></DateRangePickerComponent>

onClose(args) {/** code block */}

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate(args) {
    var daterangeObject = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObject.popupShow(); daterangeObject.popupHide();
}

<DateRangePickerComponent id="daterangepicker" created={this.create.bind(this)}></DateRangePickerComponent>

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

<EJ.DateRangePicker id="daterangepicker" open={onOpen} ></EJ.DateRangePicker>

function onOpen(args) {/** code block */ }

<DateRangePickerComponent id="daterangepicker" open={this.onOpen.bind(this)}></DateRangePickerComponent>

onOpen(args) {/** code block */ }

<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>

function onCreate(args) {
    var daterangeObject = $("#daterangepicker").data("ejDateRangePicker");
    daterangeObject.popupShow();
}

<DateRangePickerComponent id="daterangepicker" created={this.create.bind(this)}></DateRangePickerComponent>

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