美文网首页vueJs使用
关于elementui日期选择区间

关于elementui日期选择区间

作者: 记录学习生活 | 来源:发表于2021-01-20 16:52 被阅读0次

直接上代码:
HTML

<el-form-item label="开始时间" prop="StartAt">
    <el-date-picker
        v-model="dataForm.StartAt"
        type="datetime"
        placeholder="选择开始时间"
        format="yyyy-MM-dd HH:mm"
        value-format="timestamp"
        :picker-options="startDatePicker">
    </el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="EndAt">
    <el-date-picker
        v-model="dataForm.EndAt"
        type="datetime"
        placeholder="选择结束时间"
        format="yyyy-MM-dd HH:mm"
        value-format="timestamp"
        :picker-options="endDatePicker">
    </el-date-picker>
</el-form-item>

数据:

data() {
      return {
            startDatePicker:this.beginDate(),
            endDatePicker:this.processDate(),
      }
}

方法:

methods: {
        beginDate(){
            return {
                disabledDate(time){
                    return time.getTime() < Date.now() - 8.64e7//开始时间不选时,结束时间最大值小于等于当天
                }
            }
        },
        //提出结束时间必须大于提出开始时间
        processDate(){
            let self = this
            return {
                disabledDate(time){
                    if(self.dataForm.StartAt){
                        return new Date(self.dataForm.StartAt).getTime() > time.getTime()
                    }else{
                        return time.getTime() < Date.now() - 8.64e7 //开始时间不选时,结束时间最大值小于等于当天
                    }
                }
            }
        }
}

相关文章

网友评论

    本文标题:关于elementui日期选择区间

    本文链接:https://www.haomeiwen.com/subject/bvikzktx.html