elementui 时间选择器校验大于等于当天小于下一个月不可跨月

最新推荐文章于 2026-03-03 05:59:28 发布

原创最新推荐文章于 2026-03-03 05:59:28 发布 · 621 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #javascript #vue.js

收录于

文章展示了在Vue.js中使用el-date-picker组件来创建一个日期范围选择器，并通过pickerOptions配置禁用特定日期。时间校验规则确保用户选择的日期范围不跨月且限定在当前月前后一个月内。

<el-form-item label="实现期间" prop="rebateDate">
          <el-date-picker class="date-picker" style="width:300px" v-model="ruleForm.rebateDate" clearable
            :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

pickerOptions: {
        disabledDate: (time) => {
          // if (this.pickerMinDate) {
          //   return (time.getTime() > (this.pickerMinDate + this.pickerRange)) || (time.getTime() < (this.pickerMinDate - this.pickerRange))
          // }
          //大于等于当天 小于下一个月 不可跨月
          return time.getTime() < moment().subtract(1, "days").valueOf() || time.getTime() > moment().add(1, 'M').endOf('month').valueOf()
        }
      },

//时间校验规则
let newDateRule = (rule, value, callback) => {
  if (!value || !value.length) {
    callback(new Error(rule.message || '请选择实现期间'))
  } else if (value[0].slice(0, 7) != value[1].slice(0, 7)) {
    callback(new Error(rule.message || '实现期间不可跨月'))
  } else {
    callback()
  }
}```