JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
Start Date: <input id="tbStartDt" />
End Date: <input id="tbEndDt" />

JavaScript

Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

    var startdt = new Ext.form.DateField({
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt', // id of the end date field
        showToday: false
    });

    var enddt = new Ext.form.DateField({
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt', // id of the start date field
        showToday: false
    });

    startdt.applyToMarkup('tbStartDt');
    enddt.applyToMarkup('tbEndDt');