el-date-picker实现日期不可点击不可选（日期可不连续）

DSAS79

已于 2022-03-31 20:45:57 修改

阅读量1.6k

点赞数 1

文章标签： elementui vue.js

于 2022-03-31 20:44:35 首次发布

本文链接：https://blog.csdn.net/m0_61813535/article/details/123879251

版权

1.在标签中添加:picker-options="pickerOptions"

<el-form ref="changeFormRef" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="预约日期" prop="appointDate">
        <el-date-picker
        type="date"
        v-model="formData.appointDate"
        value-format="yyyy/MM/dd"
        :picker-options="pickerOptions"
        placeholder="请选择日期"
        style="width:100%"/>
     </el-form-item>
 </el-form>

2.在data中声明pickerOptions

data() {
    return {
        formData: {
            appointDate: ''
        }, 

        rules: {
            appointDate: [
                { required: true, message: '该项不能为空', trigger: ['blur', 'change']}
            ]
        },

        pickerOptions: {}  //控制日期是否可选择
    }
},

3.根据后端返回的日期来控制date-picker中日期是否可选

res.data的数据格式： ["2022/04/02","2022/04/03","2022/04/06","2022/04/07"]

getFormatDate()：是封装的、将时间处理为"2022/03/31 11:12:29"格式的的方法

methods: {
    // 获取可预约的日期
    getAppointDate() {
      reqGetAppointDate().then(res => {
        if (res.code === 200) {
          let appointDateList = res.data
          this.pickerOptions = {
            disabledDate(time) {
              let days = getFormatDate(time).split(' ')[0]
              if (appointDateList.indexOf(days) > -1) {
                return false
              } else {
                return true
              }
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
}