一、效果图
开始日期为当天,结束日期可根据单选进行填充
选中本周
选中近三月
二、
<div>
<RadioGroup v-model="period" v-on:on-change="Aperiod">
<Radio label="本周"></Radio>
<Radio label="本月"></Radio>
<Radio label="近三月"></Radio>
</RadioGroup>
</div>
<div>
<span>开始日期</span><Date-picker type="date" placeholder="Start date" v-model="today">
</Date-picker>
<span>结束日期</span> <Date-picker type="date" placeholder="End date" v-model="end">
</Date-picker>
</div>
三、js部分
const d = new Date(); // 创建新的日期对象
const today = d.toLocaleDateString();// 获取今天日期如:2020/7/26
const day = today.split('/');// 将今天日期转换为数组,以/来进行分割,day[0]为年份,day[1]为月份,day[2]为日
export default {
data() {
return {
period: '本月', // 定义默认选项
today: '',
end: '',
};
},
created() {
this.today = d.toLocaleDateString();// 在页面被创建时,给today赋值
},
methods: {
Aperiod() { // 在选项状态发生改变时触发
switch (this.period) {
case '本周':
this.ThisWeek();
break;
case '本月':
this.ThisMonth();
break;
case '近三月':
this.RecentThreeMonth();
break;
default:
break;
}
},
ThisWeek() {
switch (d.getDay()) { // 获取今天的星期名如:2020/7/26,返回0,即星期天
case 0:
this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 5}`; // 星期天,本周工作日日数+5
break;
case 1:
this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 4}`; // 星期一,本周工作日日数+4
break;
case 2:
this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 3}`; // 星期二,本周工作日日数+3
break;
case 3:
this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 2}`; // 星期三,本周工作日日数+2
break;
case 4:
this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 1}`; // 星期四,本周工作日日数+1
break;
case 5:
// eslint-disable-next-line no-alert
alert('今天是本周工作日的最后一天喔~'); // 星期五,提示
break;
default:
break;
}
},
ThisMonth() {
const month = new Date(day[0], day[1], 0).getDate(); // 获取当月的天数
this.end = `${day[0]}-${day[1]}-${month}`;
},
RecentThreeMonth() {
if (day[1] <= 9) { // 如果月份小于等于9
this.end = `${day[0]}-${Number(day[1]) + 3}-${day[2]}`; // 月份直接+3
} else {
this.end = `${day[0]}-${Number(day[1]) + 3 - 12}-${day[2]}`; // 月份先+3,再减12
}
},
},
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。