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"即可