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

最新推荐文章于 2023-12-19 22:15:00 发布

原创

最新推荐文章于 2023-12-19 22:15:00 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #datepicker #elementui

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

思路，日期的不可选使用 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="yyyy-MM-dd HH:mm"
              value-format

最低0.47元/天解锁文章

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

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