javascript - 当我在vue2中使用Date()对象时，发现有一个很奇怪的地方：getMonth +1 报错，而April有31days

问题描述

为什么this.currentMonth = mydate.getMonth()+1;在vue中显示错误？为什么我的四月有 31 天？这里似乎strday=now.getFullYear()+"-"+(now.getMonth()+1)+"-"+1;有问题，但我不知道如何更正。

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8"/>
     <script src="jslib/vue.js"></script>
     <link rel="stylesheet" href="css/semantic.min.css" media="screen" title="no title" charset="utf-8">
   </head>
  <body>
    <div id="calendar">    
    <div class="month">
        <ul>            
              <li>
              <span class="choose-year">{{ currentYear }}Year</span>
              <span class="choose-month">{{ currentMonth }}Month</span>
              </li>

    </div>
   
    <ul class="weekdays">
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li style="color:red">Saterday</li>
        <li style="color:red">Sunday</li>
    </ul>
    <ul class="days">
     
        <li  v-for="dayobject in days">           

            <span v-if="dayobject.mydate.getMonth()+1 != currentMonth" class="other-month">{{ dayobject['mydate'].getDate() }}</span>           
            <span v-else>
                <span v-if="dayobject['mydate'].getFullYear() == new Date().getFullYear() && dayobject['mydate'].getMonth() == new Date().getMonth() && dayobject['mydate'].getDate() == new Date().getDate()" class="active">{{ dayobject['mydate'].getDate() }}</span>
                <span v-else>{{ dayobject['mydate'].getDate() }}</span>
            </span>

        </li>
    </ul>
  </div>

</body>
</html>

enter code here

<script>

    var myVue=new Vue({
        el: '#calendar',
        data: {
            currentDay: 1,
            currentMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
        },
        created: function() { 
            this.initData(null);
        },
        methods: {
            initData: function(cur) {
            
                //My algorithm is:
                //1  find the first day of the month,
                //2 the date of fist day - day of the fist day, if May 1st is Tuesday, then set the fist day shown in calendar =  (May 1st).getDate()-1;
                //3 list 35days in my calender
                var mydate;
                if (cur) {
                    mydate = new Date(cur);
                } else {
                    var now=new Date();
                    mydate = new Date(now.getFullYear(),now.getMonth());
                };
                this.currentDay = mydate.getDate();
                this.currentYear = mydate.getFullYear();
                this.currentMonth = mydate.getMonth();//here if : this.currentMonth = mydate.getMonth()+1;  will get something wrong
             
                if(mydate.getDay()==0)
                {
                    mydate.setDate(mydate.getDate()-6);
                }
                else{
                  mydate.setDate(mydate.getDate()-mydate.getDay()+1);
                };
                //var str = this.formatDate(this.currentYear , this.currentMonth, 1);
                this.days =[];
                
                for (i=0; i <35; i++) {
                    var thisday=new Date();
                    thisday.setDate(mydate.getDate()+i);
                     dayobject={
                      'mydate':thisday
                    };
                    this.days.push(dayobject);

                };
              },
        },
    });
</script>

我希望我的日历显示这样，但是显示了一些奇怪的东西。

标签： javascriptdatevue.js

javascript - 当我在vue2中使用Date()对象时，发现有一个很奇怪的地方：getMonth +1 报错，而April有31days

问题描述

解决方案

推荐阅读