fix: [QDateTime] Month 'forward' button has undesirable behaviour quasarframework#847

Also fixed glitch in "date" utils: adjustDate, addToDate & subtractFromDate methods

Author: rstoenescu

src/components/datetime/InlineDatetimeIOS.vue

@@ -88,7 +88,7 @@
 import { between, capitalize } from '../../utils/format'
 import { position } from '../../utils/event'
 import { css } from '../../utils/dom'
-import { isSameDate } from '../../utils/date'
+import { isSameDate, adjustDate } from '../../utils/date'
 import DateMixin from './datetime-mixin'
 import TouchPan from '../../directives/touch-pan'
 
@@ -197,7 +197,7 @@ export default {
     },
     setMonth (value) {
       if (this.editable) {
-        this.model = new Date(this.model.setMonth(this.__parseTypeValue('month', value) - 1))
+        this.model = adjustDate(this.model, {month: value})
       }
     },
     setDay (value) {

src/components/datetime/InlineDatetimeMat.vue

@@ -106,7 +106,7 @@
               small
               flat
               :color="color"
-              @click="setMonth(month - 1, true)"
+              @click="setMonth(month - 1)"
               :disabled="beforeMinDays"
               icon="keyboard_arrow_left"
             ></q-btn>
@@ -118,7 +118,7 @@
               small
               flat
               :color="color"
-              @click="setMonth(month + 1, true)"
+              @click="setMonth(month + 1)"
               :disabled="afterMaxDays"
               icon="keyboard_arrow_right"
             ></q-btn>
@@ -222,7 +222,7 @@
 import { height, width, offset, cssTransform } from '../../utils/dom'
 import { position } from '../../utils/event'
 import { QBtn } from '../btn'
-import { isSameDate } from '../../utils/date'
+import { isSameDate, adjustDate } from '../../utils/date'
 import DateMixin from './datetime-mixin'
 import Ripple from '../../directives/ripple'
 
@@ -383,10 +383,10 @@ export default {
         this.model = new Date(this.model.setFullYear(this.__parseTypeValue('year', value)))
       }
     },
-    setMonth (value, force) {
+    setMonth (value) {
       if (this.editable) {
         this.view = 'day'
-        this.model = new Date(this.model.setMonth((force ? value : this.__parseTypeValue('month', value)) - 1))
+        this.model = adjustDate(this.model, {month: value})
       }
     },
     setDay (value) {

src/utils/date.js

@@ -28,13 +28,28 @@ function formatTimezone (offset, delimeter = '') {
   return sign + pad(hours) + delimeter + pad(minutes)
 }
 
+function setMonth (date, newMonth /* 1-based */) {
+  const
+    test = new Date(date.getFullYear(), newMonth, 0, 0, 0, 0, 0),
+    days = test.getDate()
+
+  date.setMonth(newMonth - 1, Math.min(days, date.getDate()))
+}
+
 function getChange (date, mod, add) {
   const
     t = new Date(date),
     sign = (add ? 1 : -1)
 
   Object.keys(mod).forEach(key => {
-    const op = capitalize(key === 'days' ? 'date' : key)
+    if (key === 'month') {
+      setMonth(t, t.getMonth() + 1 + sign * mod.month)
+      return
+    }
+
+    const op = key === 'year'
+      ? 'FullYear'
+      : capitalize(key === 'days' ? 'date' : key)
     t[`set${op}`](t[`get${op}`]() + sign * mod[key])
   })
   return t
@@ -98,6 +113,11 @@ export function adjustDate (date, mod, utc) {
     prefix = `set${utc ? 'UTC' : ''}`
 
   Object.keys(mod).forEach(key => {
+    if (key === 'month') {
+      setMonth(t, mod.month)
+      return
+    }
+
     const op = key === 'year'
       ? 'FullYear'
       : key.charAt(0).toUpperCase() + key.slice(1)