element UI datePicker 时间选择器限制从起始时间开始后的两小时可选

最新推荐文章于 2024-07-23 16:48:25 发布

userDengDeng

最新推荐文章于 2024-07-23 16:48:25 发布

阅读量719

点赞数

文章标签： vue datepicker elementui

本文链接：https://blog.csdn.net/userDengDeng/article/details/114584931

版权

本文介绍了如何在Vue项目中，利用Element UI的datePicker组件，通过设置`picker-options`的`disabledDate`和`selectableRange`属性，来限制用户只能选择起始时间之后的两个小时内的日期和时刻。

摘要由CSDN通过智能技术生成

思路，日期的不可选使用 picker-options: { disabledDate: (time) => {}}
时刻的不可选，使用 picker-options: { selectableRange : ‘’}
html

 <div class="el-form--time">
          <el-form-item :label="$t('开播时间')" class="date" required>
            <el-date-picker
              type="datetime"
              v-model="begin_time"
              :picker-options="datePickOptions"
              clear-icon
              prefix-icon="custom-date-icon"
              @change="handleTimeBlur"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="is_info || isedit"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div class="el-form--time">
          <el-form-item v-if="begin_time" :label="$t('预计结束时间')" class="date" required>
            <el-date-picker
              type="datetime"
              v-model="end_time"
              :picker-options="endTimePickOptions"
              clear-icon
              prefix-icon="custom-date-icon"
              format