关于 Vue.js+Element-UI 日期控件 日期范围选择

Posted karila

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 Vue.js+Element-UI 日期控件 日期范围选择相关的知识,希望对你有一定的参考价值。

理想效果 : 

技术分享

技术分享

  1. 也就是说前面时间框的时间能选的范围应该小于等于后面的时间框;
  2. 后面时间框能选的范围应该大于等于前面的时间框;

示例代码 :

页面:
<el-form-item label="注册日期">
    <el-date-picker
            v-model="filters.column.create_start_date"
            type="date"
            :picker-options="pickerBeginDateBefore"
            format="yyyy-MM-dd"
            placeholder="">
    </el-date-picker>
</el-form-item>
<el-form-item label="至" label-width="25px">
    <el-date-picker
            v-model="filters.column.create_end_date"
            type="date"
            format="yyyy-MM-dd"
            :picker-options="pickerBeginDateAfter"
            placeholder="">
    </el-date-picker>
</el-form-item>

  

vue:

data () {
    return {
        filters: {
            column: {
                create_start_date: ‘‘,
                create_end_date: ‘‘
            },
        },
        pickerBeginDateBefore:{
            disabledDate: (time) => {
                let beginDateVal = this.filters.column.create_end_date;
                if (beginDateVal) {
                    return time.getTime() > beginDateVal;
                }
            }
        },
        pickerBeginDateAfter:{
            disabledDate: (time) => {
                let beginDateVal = this.filters.column.create_start_date;
                if (beginDateVal) {
                    return time.getTime() < beginDateVal;
                }
            }
        }
    }
}

  

提交:
//这个请求封装了axios
api.request(url, data, (res)=> {
    /*
        查询之后格式this.filters.column.create_start_date中日期发生变化;
        Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
        所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
        式;
    */

    /*moment 安装 npm install moment --save*/

   if(this.filters.column.create_start_date){
       this.filters.column.create_start_date = 
        moment(this.filters.column.create_start_date);
    }
    if(this.filters.column.create_end_date){
         this.filters.column.create_end_date = 
     moment(this.filters.column.create_end_date);
    }
})

  

原文链接:http://blog.csdn.net/qq_25386583/article/details/77044179



以上是关于关于 Vue.js+Element-UI 日期控件 日期范围选择的主要内容,如果未能解决你的问题,请参考以下文章

element-ui日期控件el-date-picker显示的月份、日期由英文改为中文

17. Vue 使用Element-ui的国际语言插件i18n导致DatePicker日期控件英文错乱

关于vue.js中表单控件绑定练习

关于element-ui表格的使用

关于ElementUI的DatePicker时区问题

Element-UI+Vue.js