elementUi时间选择器限制结束时间大于开始时间并且不能选过去时间

  <el-form ref="addRowData" label-width="100px"  :rules="addFormRules" :model="addRowData">
    <el-form-item label="上架日期" prop="start_time">
      <el-date-picker
        v-model="addRowData.start_time"
        :picker-options="startPickerOptions"
        type="date"
        format="yyyy-MM-dd"
        value-format="timestamp"
        placeholder="选择日期"/>
    </el-form-item>
    <el-form-item label="下架日期" prop="end_time">
      <el-date-picker
        v-model="addRowData.end_time"
        :picker-options="endPickerOptions"
        type="date"
        format="yyyy-MM-dd"
        value-format="timestamp"
        placeholder="选择日期"/>
    </el-form-item>
</el-form>
        data() {
          const validateStartTime = (rule, value, callback) => {
            if(!value){
              callback(new Error("请选择上架日期"));
            }
            else {
              if(this.addRowData.end_time){
                this.$refs.addRowData.validateField('end_time');
              }
              callback();
            }
          };
          const validateEndTime = (rule, value, callback) => {
            if(!value){
              callback(new Error("请选择下架日期"));
            } else if(this.addRowData.start_time > value) {
              callback(new Error("下架日期必须大于上架日期!"))
            } else {
              callback()
            }
          };
          return {
            // 不能选历史日期
            startPickerOptions: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7; // 如果后面没有-8.64e7就不可以选择今天的
              }
            },
            endPickerOptions: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7 ; // 如果后面没有-8.64e7就不可以选择今天的
              }
            },
            addRowData:{
		start_time: '',
		end_time: ''
            },
            addFormRules: {
                start_time: [
                    {required: true, validator: validateStartTime, trigger: 'change'}
                ],
                end_time: [
                    {required: true, validator: validateEndTime, trigger: 'change'}
                ]
            },
          }
      }
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值