Ant Design Vue 中日期选择控件
a-range-picker
客户要求:默认显示当月的第一天和最后一天
<a-range-picker
v-model="queryParam.createTimeRange"
format="YYYY-MM-DD"
:placeholder="['开始时间', '结束时间']"
@change="onDateChange"
@ok="onDateOk"
/>
import moment from 'moment'
created() {
//获取当月第一天
this.queryParam.beginTime=this.currentTime();
//获取当月最后一天
this.queryParam.endTime=this.getLastDayOfNaturalMonth();
//回显数据至日期选择控件
this.queryParam.createTimeRange = [moment(new Date(this.queryParam.beginTime),'YYYY-MM-DD'),moment(new Date(this.queryParam.endTime),'YYYY-MM-DD')]
},
methods: {
//获取当月的第一天
currentTime() {
const currentDate = new Date();
const year = currentDate.getFullYear();//获取当前年
const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
const firstDay = "01";//日
return `${year}-${month}-${firstDay}`;
},
//获取当月的最后一天
getLastDayOfNaturalMonth() {
// 获取当前日期
const currentDate = new Date();
// 获取当前年份
let year = currentDate.getFullYear();
// 获取下个月的月份,使用 padStart 在月份小于 10 时在前面补零
let month = String(currentDate.getMonth() + 2).padStart(2, "0");
// 如果月份为 '13',说明当前是12月,需要更新年份并将月份设置为 '01'
if (month === '13') {
year = year + 1;
month = '01';
}
// 设置每个月的第一天为 '01'
let firstDay = "01";
// 构建下个月的第一天的日期字符串,格式为 'YYYY-MM-DD'
const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
// 计算当前月的最后一天,通过减去一天的毫秒数来得到
const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
// 将最后一天的日期转换为 ISO 格式,并提取日期部分
return lastDayOfMonth.toISOString().split("T")[0];
},
onDateChange: function (value, dateString) {
this.queryParam.beginTime=dateString[0];
this.queryParam.endTime=dateString[1];
this.$forceUpdate()
},
onDateOk(value) {
console.log(value);
},
}
小计
1.获取当月第一天和最后一天的方法是从这个博主看到的https://blog.csdn.net/shejiu666666?type=blog
2.时间控件的展示进行记录
3.moment 是一个专门处理日期的插件库,在项目中可以下载使用