elementUI DateTimePicker 时间不能选择之前的时间

使用日期选择器时,要求不能选择小于当前时间的

解决方法:日期控制,使用的 picker-options,时间使用的rule验证规则(因selectableRange,使得每天的都受控制,不能达到要求)

详细代码如下:

<el-form ref="form" :model="form" class="mt-20px">
  <el-form-item label="发布时间" prop="timing" :verify="timeValidateFunc">
    <el-date-picker
      v-model="form.timing"
      type="datetime"
      placeholder="选择日期时间"
      default-time="12:00:00"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
 </el-form-item>
</el-form>

#pickerOptions
data() {
    return {
      form: {
        timing: '',
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        // selectableRange: '15:00:00 - 23:59:59',
      },
    };
  },

#验证规则
timeValidateFunc() {
  return [
    {
      validator: (rule, value, callback) => {
      const start = new Date(this.form.timing).getTime();
      if (!value) {
        callback(new Error('请选择时间'));
      } else if (start < Date.now()) {
        callback(new Error('发布时间要大于当前时间!'));
      } else {
        callback();
      }
     },
    },
 ];
},

实际效果提示:当前时间:2022-10-17 11:37

 选择时间点击确定,提示

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ElementUIdatetimepicker是一个日期时间选择器组件,可以让用户方便地选择日期和时间。它支持多种日期时间格式,并且可以自定义日期时间范围。用户可以通过单击日期时间选择器中的日期和时间选择日期和时间,也可以通过手动输入日期和时间选择。此外,datetimepicker还支持快捷键选择日期和时间,例如按下“今天”按钮可以快速选择当前日期。 ### 回答2: Element UI 时间选择器(DateTimePicker)组件是基于 Vue.js 的一个日期时间选择器组件,能够快速地实现用户对日期时间选择,并且具备高度的可定制性。 使用Element UI DateTimePicker 时间选择器,用户可以选择日期、时间(精确到秒)和时间范围等。此外,还能够选择不同的主题颜色,也能够针对不同的数据格式进行处理,以便更好地呈现数据。 DateTimePicker 时间选择器组件具有良好的兼容性和可扩展性,支持 Vue.js 和 Element UI 等主流前端框架。在实际的应用场景中,其被广泛应用于各类网页端和移动端的表单中,为用户提供更加便捷的时间选择体验。 总的来说,Element UI DateTimePicker 时间选择器是一个非常实用、易用、可定制化和高效的组件,为开发者提供了一种简单、灵活、规范的时间选择组件方案。 ### 回答3: ElementUI 是一款基于 Vue.js 的前端框架。其中的 datetimepicker 组件可以用于选择时间和日期,提供了年、月、日、时、分、秒等多种项,并且支持自定义时间格式以适应各种需求。 使用 datetimepicker 组件需要在 Vue 组件中引入 ElementUI 模块,然后在 HTML 中使用 datetimepicker 标签。在标签中可以设置一些属性来控制 datetimepicker 的表现,例如:默认展示时间、日期范围、时间格式等等。 datetimepicker 提供了多种项供用户选择时间和日期。其中,可以单独选择年、月、日、时、分、秒,也可以一次性选择年月日时分秒,这取决于具体的使用情境和需求。在设置属性的时候,需要根据不同的需求来进行定制,以便让 datetimepicker 组件更加符合用户的实际需求。 与此同时,datetimepicker 还提供了时间格式的自定义功能,用户可以按照自己的要求设置各个时间部分之间的间隔符号,以及具体时间的格式,从而更好地适应各种需求。 总之,ElementUIdatetimepicker 组件提供了时间和日期选择的多种项和自定义功能,可以帮助开发者快速实现日期和时间选择功能,满足各种实际需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值