JSFiddle - React, Tailwind, and code Playground

by langpz

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<div class="container">
<el-date-picker
  v-model="value3"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  value-format="yyyy-MM-dd"
  :picker-options="pickerOptions"
  end-placeholder="结束日期">
  </el-date-picker>
</div>
</div>

SCSS

@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    data() {
      return {
        value3: '',
        daterange: {
          maxTime: "",
          minTime: "",
          max: 30,
        },
        pickerOptions: {
          onPick: time => {
            if (!time.maxDate) {
              let timeRange = this.daterange.max * 24 * 60 * 60 * 1000; 
              this.daterange.minTime = time.minDate.getTime() - timeRange; 
              this.daterange.maxTime = time.minDate.getTime() + timeRange;
            } else {
              this.daterange.maxTime = "";
              this.daterange.minTime = "";
            }
          },
          disabledDate: time => {
            if (this.daterange.minTime && this.daterange.maxTime) {
              return (
                time.getTime() < this.daterange.minTime ||
                time.getTime() > this.daterange.maxTime
              );
            }
          }
        }
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')