element ui 两个分的el-date-picker做选择限制

          <el-form-item label="生效時間" prop="startTime">
            <el-date-picker
              v-model="formAdd.startTime"
              :disabled="isOperation == false ? formAdd.status != 1 : false"
              style="width: 100%"
              type="datetime"
              placeholder="請選擇生效時間"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="pickerOptionsStartChange"
              :picker-options="pickerOptionsStart"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="有效時間" prop="expireTime">
            <el-date-picker
              v-model="formAdd.expireTime"
              :disabled="isOperation == false ? formAdd.status != 1 : false"
              style="width: 100%"
              type="datetime"
              placeholder="請選擇有效時間"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="{
                disabledDate(time) {
                  let beginDateVal = formAdd.startTime;
                  if (beginDateVal) {
                    if (
                      new Date(beginDateVal).Format('yyyy-MM-dd') ==
                      new Date(formAdd.expireTime).Format('yyyy-MM-dd')
                    ) {
                      defaultTime = `${new Date(beginDateVal).Format(
                        'hh:mm:ss'
                      )} - 23:59:59`;
                    } else {
                      defaultTime = '00:00:00 - 23:59:59';
                    }
                    return time.getTime() < new Date(beginDateVal).getTime();
                  }
                },
                selectableRange: defaultTime
              }"
            >
            </el-date-picker>
          </el-form-item>
<script>
export default {
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.formAdd.expireTime;
          if (endDateVal) {
            //console.log("开始时间", this.formAdd.startTime);
            return time.getTime() >= new Date(endDateVal).getTime();
          }
        }
      },
      defaultTime: "00:00:00 - 23:59:59",
      formAdd: {
        startTime: "",
        expireTime: "",
      }
     }
   }
</script>


new Date(beginDateVal).Format('yyyy-MM-dd') 其中.Format('yyyy-MM-dd')是对new Date()的原生扩展,在上个文章有 


本文作者:admin

本文链接:https://www.javalc.com/post/54.html

版权声明:本篇文章于2021-02-24,由admin发表,转载请注明出处:分享你我。如有疑问,请联系我们

uni-app中扩展new Date()使用

发表评论

取消
扫码支持