title: How do I account for leap years and months with 30 days in custom date picker drop downs?
body: <p>I'm trying to build a date picker with drop downs. What I want to do is only display the amount of days that each month has. So 30 days for April, June, September, and November; 29 days for February if it's a leap year; 31 days for the rest of the months. </p>
  
  <p>I have tried doing this with my code, but for February I get 29 days despite the year and every other month I get 31 days.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt;= 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' &amp;&amp; !this.leapYear(this.year)) {
          lastday = 28;
        } else {
          lastday = 31;
        }
        for (let i = 1; i &lt;= lastday; ++i) {
          day.push(i);
        }
        return day;
      },
      date: function() {
        return this.year + '-' + this.month + '-' + this.day;
      }
    },
  
    methods: {
      leapYear: function(year) {
        return ((year % 4 == 0) &amp;&amp; (year % 100 != 0)) || (year % 400 == 0);
      }
    }
  });
  
  new Vue({
    el: '#app',
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"&gt;&lt;/script&gt;
  &lt;script type="x/template" id="date-picker"&gt;
    &lt;div&gt;
  
      &lt;select v-model="month" name="month" style="text-indent: 5px;"&gt;
        &lt;option value="" selected="selected" disabled="disabled" hidden="hidden"&gt;Month&lt;/option&gt;
        &lt;option v-for="month in months" :value="month.number"&gt;{{month.name}}&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select v-model="day"&gt;
        &lt;option value="" selected="selected" disabled="disabled" hidden="hidden"&gt;Day&lt;/option&gt;
        &lt;option v-for="day in days" :value="day"&gt;{{day}}&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select v-model="year"&gt;
        &lt;option value="" selected="selected" disabled="disabled" hidden="hidden"&gt;Year&lt;/option&gt;
        &lt;option v-for="year in years" :value="year"&gt;{{year}}&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="text" hidden name="date" :value="date"&gt;
  
    &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;div id="app"&gt;
  
    &lt;date-picker&gt;&lt;/date-picker&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>