单选联动填充日期选择器,转换为数组形式的方法进行日期拼接

时间:2020-7-27 作者:admin

一、效果图

单选联动填充日期选择器,转换为数组形式的方法进行日期拼接


开始日期为当天,结束日期可根据单选进行填充


选中本周

单选联动填充日期选择器,转换为数组形式的方法进行日期拼接


选中近三月

单选联动填充日期选择器,转换为数组形式的方法进行日期拼接


二、

<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
  }
},

},
};

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。