相关文章推荐
很酷的南瓜  ·  GC.GetTotalMemory(Bool ...·  3 周前    · 
骑白马的盒饭  ·  export to csv - ...·  1 年前    · 
豪爽的针织衫  ·  MFC中static控件 ...·  1 年前    · 
读研的豌豆  ·  [Oracle] SQL*Loader ...·  1 年前    · 
:picker-options = " pickerOptions " value-format = " yyyy-MM-dd " start-placeholder = " 开始日期 " end-placeholder = " 结束日期 " > </ el-date-picker >
data(){
    return {
        var vue = this;//为了在disabledDate中用到this
           pickerOptions: {
                    //timeOptionRange:'',
                    disabledDate: time => {//this为当前日期控件不是页面,所以需要vue=this                      
                        if(vue.searchForm.tdate){
                        // 设置可选择的日期为今天之后的一个月内
                            let curDate = new Date(vue.searchForm.tdate).getTime();
                            // 这里算出一个月的毫秒数,
                            // 这里使用30的平均值, 实际中应根据具体的每个月有多少天计算;  
                            let day = 30 * 24 * 3600 * 1000;
                            let dateRegionMax = curDate + day;
                            let dateRegionMin = curDate - day;
                            return (
                                time.getTime() > dateRegionMax || time.getTime() < dateRegionMin
                    onPick(time){//this为当前日期控件,不是页面,所以需要vue=this
                        //当第一时间选中才设置禁用
                        if(time.minDate && !time.maxDate){
                            vue.tdata = time.minDate;
                        if(time.maxDate){
                            vue.tdata = null;
                   //存储临时时间
                tdata:null

注意:picker-options=“pickerOptions”

这样就阔以啦~
实现element ui 日期空间,前后范围30天内 <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期" range-... 问题描述: element-ui 日期选择器如何限制只能选择一个月,超过一个月不能选择,也就是在选定起始日期时,只能向后面选择30天,同时不能选择超过今天的日期element-ui日期选择组件地址:http://element-cn.eleme.io/#/zh-CN/component/date-picker picker-options:当前时间日期选择器特有的选项,类型o... 日期时间选择器如何限制最多选择30天,其余时间置灰 <el-form ref="form" :model="form" label-position="right" label-width="180px" size="small" > <el-row> <el-col :span="8"> <el-form-item prop="taskDate" label="时间"> el-date-picker v-model="daterange" value-format="yyyy-MM-dd" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions1" clearable> let three = 30 * 24 * 3600 * 1000 // 修改30就是天数。 在前端开发中,很多时候都需要到时间选择器来限定时间的选择范围。比如在12306上买票,时间的限定是30天,而且是当前日期开始,那么这样的事件限定,在前端中是如何实现的呢?这里就elementUI时间选择器来做一个类似12306上的时间选择器elementUI-Plus中控制日期可选择的范围是disabled-date。ps:elementUI(没有PLUS)的是picker-options。以上是对结束时间进行限制,对开始时间限制,反过来就好了。我们可以在标签中定义。 项目中有个需求,开始时间选中后,结束时间自动填充成30天后的时间<当然,如果30天后的时间比当前时间大,那么填充当前时间结束时间>。结束时间选中时,开始时间自动填充为结束时间的前30天 效果如下图所示: 代码如下: 1.html部分 <el-date-picker v-model="query.startDate" :clearable="false" type="date" format="yyyy-MM-dd" value-format="