【VUE】日付プラグインの制限はオプションではありません

私たちが開発する製品では、日付を選択する必要があることがよくありますが、その日付も制限されています。たとえば、開始日は現在の日付よりも前の日付にすることはできず、期限は現在の日付より X 日だけ大きくすることができます。 . 通常、フロントエンドとバックエンドを制御します。ここでは簡単です。フロントエンドの Vue フレームワークで制限する方法を説明します。Ele.meのフレームワークを使用しています

1. 開始日は現在の日付より前にすることはできません

<el-form-item label="起始时间：" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="form.startTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-col>
</el-form-item>

data() {
    return {
      
      // 时间控制器
      pickerOptions: {
        disabledDate: (time) => {
          let nowData = new Date()
          nowData = new Date(nowData.setDate(nowData.getDate() - 1))
          return time < nowData
        }
      },

2. 期限は 30 日を超えることはできません

<el-form-item label="截止时间：" prop="endTime">
<el-col :span="11">
            <el-date-picker
            :picker-options="pickerOptionsEnd"
              v-model="form.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-col>
        </el-form-item>

data() {
    return {
pickerOptionsEnd: {
        disabledDate(time) {
          const one = 30 * 24 * 3600 * 1000;
          return time.getTime() > Date.now() + one || time.getTime() < Date.now();
        }
    }
}