如何使用自定义日期选择器下拉菜单中的30天来计算leap年和months月？

Question

我正在尝试使用下拉菜单构建日期选择器。我只想显示每个月的工作天数。因此，四月，六月，九月和十一月为30天；如果是a年，则2月为29天；其余月份为31天。

我尝试使用我的代码执行此操作，但是尽管有年份，但二月份我仍然获得29天，而其他月份则获得31天。

Vue.component('date-picker', {
  template: '#date-picker',
  data() {
    return {
      month: '',
      day: '',
      year: '',
      monthsWith30Days: ["April", "June", "September", "November"],
      months: [{
          name: 'January',
          number: '01'
        },
        {
          name: 'February',
          number: '02'
        },
        {
          name: 'March',
          number: '03'
        },
        {
          name: 'April',
          number: '04'
        },
        {
          name: 'May',
          number: '05'
        },
        {
          name: 'June',
          number: '06'
        },
        {
          name: 'July',
          number: '07'
        },
        {
          name: 'August',
          number: '08'
        },
        {
          name: 'September',
          number: '09'
        },
        {
          name: 'October',
          number: '10'
        },
        {
          name: 'November',
          number: '11'
        },
        {
          name: 'December',
          number: '12'
        }
      ]
    }
  },

  computed: {
    years: function() {
      var year = [];
      var currentYear = (new Date()).getFullYear();
      for (let i = 1990; i <= currentYear; ++i) {
        year.push(i);
      }
      return year;
    },
    days: function() {
      var day = [];
      var lastday;
      if (this.monthsWith30Days.includes(this.month)) {
        lastday = 30;
      } else if (this.leapYear(this.year)) {
        lastday = 29;
      } else if (this.month === 'February' && !this.leapYear(this.year)) {
        lastday = 28;
      } else {
        lastday = 31;
      }
      for (let i = 1; i <= lastday; ++i) {
        day.push(i);
      }
      return day;
    },
    date: function() {
      return this.year + '-' + this.month + '-' + this.day;
    }
  },

  methods: {
    leapYear: function(year) {
      return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
    }
  }
});

new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script type="x/template" id="date-picker">
  <div>

    <select v-model="month" name="month" style="text-indent: 5px;">
      <option value="" selected="selected" disabled="disabled" hidden="hidden">Month</option>
      <option v-for="month in months" :value="month.number">{{month.name}}</option>
    </select>

    <select v-model="day">
      <option value="" selected="selected" disabled="disabled" hidden="hidden">Day</option>
      <option v-for="day in days" :value="day">{{day}}</option>
    </select>

    <select v-model="year">
      <option value="" selected="selected" disabled="disabled" hidden="hidden">Year</option>
      <option v-for="year in years" :value="year">{{year}}</option>
    </select>

    <input type="text" hidden name="date" :value="date">

  </div>
</script>

<div id="app">

  <date-picker></date-picker>

</div>

Answer 1

JavaScript Date对象具有确定给定月份和年份中天数的所有功能。

这是CodeSandbox Demonstration，显示leap年和选定月份和年份的天数。