element 日期选择器禁用日期时段

最新推荐文章于 2024-03-07 18:29:35 发布

先不要想收获，扎实

最新推荐文章于 2024-03-07 18:29:35 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： element UI 文章标签：组件化

本文链接：https://blog.youkuaiyun.com/qq_41820930/article/details/121473411

element UI 专栏收录该内容

1 篇文章

订阅专栏

博客内容涉及前端开发中使用`el-date-picker`组件设置还款时间的起始和结束日期。通过`v-model`绑定日期，并利用`disabledDate`属性防止选择的结束日期早于开始日期，确保日期选择的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<el-form-item label="还款时间">
        <el-date-picker
          v-model="Form.start_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="起始日期时间"
          :picker-options="pickSelectStart"
        ></el-date-picker>
        -
        <el-date-picker
          v-model="Form.end_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="最终日期时间"
          :picker-options="pickSelectEnd"
        ></el-date-picker>
      </el-form-item>

data内

pickSelectStart: {
        disabledDate: (time) => {
          //   return time.getTime() > Date.now() - 8.64e6;
        },
      },
      pickSelectEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() <
            new Date(this.Form.start_time).valueOf() - 1 * 24 * 60 * 60 * 1000
          );
        },
      },