Element UI -- el-date-picker 日期组件设置默认值

最近有需求，列表查询条件的日期组件自动展示前一周到今天的日期。做个小记。废话不多说，直接上代码。

html:

<el-date-picker
         style="width:23%" 
         v-model="time"
         type="daterange"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         value-format="yyyy-MM-dd"
></el-date-picker>

js：计算属性

 computed: {
        // 默认时间
        timeDefault () {
            let date = new Date()
            // 通过时间戳计算
            let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
            let defalutEndTime = date.getTime()
            let startDateNs = new Date(defalutStartTime) 
            let endDateNs = new Date(defalutEndTime)
            // 月，日 不够10补0
            defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
            defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
            return [defalutStartTime, defalutEndTime]
        }
    },

created生命周期里直接赋值

    created(){
        this.time = this.timeDefault;
    },

以上即可。

关于日期的小笔记：

获取当前日期+指定天数之后的日期为默认日期（此示例为当前日期+20天后的日期）

formatDate(new Date(new Date().getTime() + 20 * 24 * 3600 * 1000),true)//转换成时间戳之后相加20天再转换成年月日的字符串格式 方便传参

 

/**

 * 日期格式转换

 */

export function formatDate(date, toStr) {

    var year = date.getFullYear()

    var month = format(date.getMonth() + 1)

    var da = format(date.getDate())

    if (toStr) {

        return year + '-' + month + '-' + da

    }

    return year + month + da

}

 

/**

 * 日期格式转换 不足10补位0

 */

export function format(val) {

    return Number(val) < 10 ? '0' + val : '' + val

}

 

 

 

 

elementUI plus 中 设置日期日期范围在90天内

// 日期禁选

const disabledDate = time => {

  if (props.isDisable && props.type == 'daterange' && dateRange.value != null) {

    let startTime = Date.parse(new Date(dateRange.value[0]))

    return time.getTime() > startTime + 45 * 8.64e7 || time.getTime() < startTime - 45 * 8.64e7

  }

}

 

在el-date-picker 中设置禁选属性 

  :disabled-date="disabledDate"即可