element el-date-picker 插件默认时间属性default-value怎么赋值

Posted 2023-04-27

代码如下：

<el-date-picker

v-model="pickerDate"
       

type="daterange"
       

range-separator="至"
       

start-placeholder="开始日期"
       

:picker-options="pickerBeginDateBefore"
       

:default-value="timeDefaultShow"
       

end-placeholder="结束日期"
       

size="small"
       

class="margin-right-10">
     

</el-date-picker>

data()

return

pickerBeginDateBefore:

disabledDate(time)

return time.getTime() > Date.now();

,

timeDefaultShow:'',

在created或mounted（也就是页面第一次加载时）更新timeDefaultShow:

上个月的当前日期为默认值：

that.timeDefaultShow = new Date();

that.timeDefaultShow.setMonth(new Date().getMonth() - 1);

扩展资料：

default-value是设置当前日期默认值的。"timeDefaultShow"是在data里面的值，而不是方法。

获取Element 中时间组件el-date-picker的时间：

<el-date-picker

v-model="myTime"

type="datetime"

format="yyyy-MM-ddHH:mm:ss"

value-format="yyyy-MM-ddHH:mm:ss"

placeholder="选择日期">

</el-date-picker>    

js代码：

data()

return

myTime :null

,methods:

logMyDateTime

console.log(myTime ); 

参考技术A 默认值，你放到 v-model里面就好。
v-model="time"
data()
return
time:new Date('2022-10-19')



手册里面说的 default-value,是当你聚焦，日历打开以后默认显示的时间。
比如：你把v-model去掉，然后换成 default-value
:default-value="timeDefaultShow"

data()
return
timeDefaultShow:new Date('2022-10-23') //在没有v-model的情况下，默认展示出来的日历时间是 23号

本回答被提问者采纳 参考技术B <el-time-picker
v-model="goTime"
placeholder="选择时间范围">
</el-time-picker>
goTime: [ new Date(0, 0), new Date(0, 0)],

element-ui的el-date-picker组件（限制时间范围选择）

　　element-ui的el-date-picker组件有不同的type值能够实现不同的时间选择功能。能够通过pickoption限制选择的范围，但是某些时候我们需要对开始时间和结束时间进行相应的限制，

　　例如：

　　　　某个需求默认起始时间为昨日， 选择时间跨度不可超过366天，在这种情况下有两种解决办法，

　　　　1.写两个datepicke组件，把起始时间和结束时间的pickeroptions进行相应的限制，但是这样写的话就需要写较为繁琐的逻辑。

　　　　2.写一个datepicker组件，将type设置为daterange，这时就只用写一个pickeroptions进行时间的限制（实现方法如下）。

 <el-date-picker 
     v-model="ruleForm.date"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
       format="yyyy-MM-dd"
        :picker-options="pickerOptions1">
</el-date-picker>
//组件

//限制
pickerOptions1:{
                onPick: (obj) => {
                    this.pickerMinDate = new Date(obj.minDate).getTime();
                    console.log(obj)
                },
                disabledDate:(time)=> {
                    if (this.pickerMinDate) {
                        const day1 =  366 * 24 * 3600 * 1000
                        let maxTime = this.pickerMinDate + day1
                        let minTime = this.pickerMinDate - day1
                        return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }else{
                        return time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }
                    
                }
            },

第二种方法中含有一个onpick的函数能够将第一次点击后获取的时间拿到，这时，如果需求中有开始时间和结束时间的联动的话，我们就能够通过这个函数进行设置。