需求:数据量太大时,初始进入页面 默认展示两周或一个月数据
1.默认进去初始当前月
<template>
<a-form-item label="添加时间">
<a-range-picker :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" />
</a-form-item>
</template>
created() {
this.getInitializeDate();//获取当月默认日期(当月1号到当天)
},
method:{
getInitializeDate() {
let date = new Date()//获取新的时间
//获取当前年份,并且转为字符串
let year = date.getFullYear().toString()
//获取当前月份,因为月份是要从0开始,此处要加1,
//使用三元表达式,判断是否小于10,如果是的话,就在字符串前面拼接'0'
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
//获取天,判断是否小于10,如果是的话,就在在字符串前面拼接'0'
let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
//字符串拼接,将开始时间和结束时间进行拼接
let start = year + '-' + month + '-01' //当月第一天
let end = year + '-' + month + '-' + day //当天
this.createValue = [start, end] //将值设置给组件DatePicker 绑定的数据
},
}
2.默认进去显示14天 比较简单 多少天 下方代码数字填多少就可以了
<a-col :md="8" :sm="24">
<a-range-picker style="width:100%;" :placeholder="['开始时间', '结束时间']" :value="createValue" format="YYYY-MM-DD" @change="onChange" />
</a-col>
import dayjs from 'dayjs';
created() {
//是要传给后端的值 进行了日期格式化
this.queryParam.opSTime = dayjs(moment().startOf('day').subtract(14, 'd')).format('YYYY-MM-DD');
this.queryParam.opETime = dayjs(moment().endOf('day')).format('YYYY-MM-DD');
//列表接口请求
this.loadList(1);
//日期选择器页面显示的值
this.createValue = [moment().startOf('day').subtract(14, 'd'), moment().endOf('day')]
},