Take leap years into account

js/components/__tests__/date_selector.test.js

@@ -32,6 +32,8 @@ describe('DateSelector', () => {
 
   describe('daysMaxCalculation', () => {
     it('calculates correctly for each month', () => {
+      component.year = null
+
       let months = {
         '1': 31,
         '2': 29,
@@ -52,6 +54,19 @@ describe('DateSelector', () => {
         expect(component.daysMaxCalculation).toEqual(months[month])
       }
     })
+
+    it('takes year or lack of year into account and calculates leap years', () => {
+      component.month = 2
+
+      component.year = null
+      expect(component.daysMaxCalculation).toEqual(29)
+
+      component.year = 2019
+      expect(component.daysMaxCalculation).toEqual(28)
+
+      component.year = 2016
+      expect(component.daysMaxCalculation).toEqual(29)
+    })
   })
 
   describe('isMonthValid', () => {

js/components/date_selector.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { getDaysInMonth } from 'date-fns'
 
 var paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -78,7 +79,11 @@ export default Vue.component('date-selector', {
     daysMaxCalculation: function() {
       switch (parseInt(this.month)) {
         case 2: // February
-          return 29
+          if (this.year) {
+            return getDaysInMonth(new Date(this.year, this.month - 1))
+          } else {
+            return 29
+          }
           break
 
         case 4: // April