JS获取当前年月份的每一天,获取当前月的每一天日期等

26 篇文章 1 订阅

1.先上效果图:

2.有时候我们的需求需要展示当前月份的每一天,比如以下的echarts需求:

那此时就可以很好的得到了.

代码部分:

data() {
    return {
      dataArr: []   //当前年月的每一天数组
    };
  },
  methods: {
    /*获取一个月的天数 */
    getCountDays() {
      let curDate = new Date();
      let curMonth = curDate.getMonth();
      curDate.setMonth(curMonth + 1);
      curDate.setDate(0);
      return curDate.getDate();
    },

    /*获取当前月份的每一天*/
    getEveryDay() {
      let day = this.getCountDays();
      // 获取当前日期
      let date = new Date();
      // 获取当前月份
      let nowMonth = date.getMonth() + 1;
      // 对月份进行处理,1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }
      for (let k = 1; k <= day; k++) {
        // 对日期进行处理,1-9号在前面添加一个“0”
        if (k >= 0 && k <= 9) {
          k = "0" + k;
        }
        this.dataArr.push(`${nowMonth}/${k}`);
      }
      console.log(this.dataArr);     
    }
  },
  created() {
    this.getEveryDay()
  },

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过Vue的computed属性来实现获取当前月份,并通过v-for指令动态展示每一天,并通过JavaScript的Date对象获取一天所对应的星期几。 以下是一个简单的实现示例: ```html <template> <div> <select v-model="selectedMonth"> <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option> </select> <table> <thead> <tr> <th v-for="(day, index) in daysOfWeek" :key="index">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="week in weeks" :key="week"> <td v-for="day in daysInMonth(week)" :key="day.date" :class="{ 'today': isToday(day.date) }"> {{ day.date }} <br /> {{ day.dayOfWeek }} </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { selectedMonth: new Date().getMonth(), months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }; }, computed: { currentYear() { return new Date().getFullYear(); }, currentMonth() { return this.selectedMonth; }, weeks() { const daysInMonth = this.daysInMonth(); const weekRows = []; let currentWeek = []; for (let i = 0; i < daysInMonth.length; i++) { currentWeek.push(daysInMonth[i]); if (daysInMonth[i].dayOfWeek === 'Sat' || i === daysInMonth.length - 1) { weekRows.push(currentWeek); currentWeek = []; } } return weekRows; } }, methods: { daysInMonth(week) { const daysInMonth = []; const year = this.currentYear; const month = this.currentMonth; const date = new Date(year, month, 1); while (date.getMonth() === month || daysInMonth.length < 35) { if (!week || date.getDay() === this.daysOfWeek.indexOf(week)) { daysInMonth.push({ date: date.getDate(), dayOfWeek: this.daysOfWeek[date.getDay()] }); } date.setDate(date.getDate() + 1); } return daysInMonth; }, isToday(date) { const today = new Date(); return this.currentYear === today.getFullYear() && this.currentMonth === today.getMonth() && date === today.getDate(); } } }; </script> <style> .today { background-color: #f0f0f0; } </style> ``` 在上面的示例中,我们首先定义了一个选项框,用户可以选择要展示的月份。然后,我们使用一个表格来展示当前月份日期和星期几。我们使用computed属性来获取当前份、月份和星期几,并通过v-for指令动态展示每一天。我们还定义了一个方法来确定当前日期是否为今天,并将其标记为不同的颜色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值