一、效果图
开始日期为当天，完结日期可依据单选进行填充
选中本周
选中近三月
二、
<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 }},},
};