vu3中，时间组件el-date-picker起止日期限制——开始日期限制、结束日期限制

最新推荐文章于 2024-07-25 09:51:39 发布

viceen

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量840

点赞数

分类专栏： vue-创新文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/132524893

版权

vue-创新专栏收录该内容

65 篇文章 2 订阅

订阅专栏

vu3中，时间组件el-date-picker起止日期限制——开始日期限制、结束日期限制

index.vue

<template>
  <div>
    <el-form
      ref="formRef"
      class="inline-form"
      label-width="130px"
      :model="formInline"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            class="width25"
            label="
              开始日期：
            "
            prop="startDate"
            :rules="{
              required: true,
              message: '请选择开始日期',
              trigger: ['blur', 'change'],
            }"
          >
            <el-date-picker
              v-model="formInline.startDate"
              :disabled="route.query.type === 'view'"
              :disabled-date="disabledDateStart"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              type="date"
              value-format="YYYY-MM-DD"
              @blur="chageDate"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            class="width25"
            label="
              结束日期：
            "
            prop="endDate"
            :rules="{
              required: true,
              message: '请选择结束日期',
              trigger: ['blur', 'change'],
            }"
          >
            <el-date-picker
              v-model="formInline.endDate"
              :disabled="route.query.type === 'view'"
              :disabled-date="disabledDateEnd"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              type="date"
              value-format="YYYY-MM-DD"
              @blur="chageDate"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
  const formRef = ref();
  const route = useRoute();
  const formInline = ref({
    startDate: "", //项目开始日期
    endDate: "", //项目结束日期
  });
  const dateVal = (date) => {
    return Date.parse(new Date(date));
  };
  // 开始日期限制
  const disabledDateStart = (time) => {
    if (formInline.value.endDate) {
      return time.getTime() > dateVal(formInline.value.endDate);
    }
  };
  // 结束日期限制
  const disabledDateEnd = (time) => {
    if (formInline.value.startDate) {
      return time.getTime() < dateVal(formInline.value.startDate);
    }
  };
  const chageDate = () => {};
</script>
<style lang="scss" scoped></style>