计算是否在月份的最后X天，然后增加月份

Question

I'm trying to fix an issue with a Vue JS application form's pay frequency <select> . To explain a little about what I have, I'll add some context here.

There's an application form, with a <select> box with some options for the user to select when they're next paid, eg: Last Working day of the month, Weekly, Bi-weekly, Last Monday of the month, Last Tuesday of the month etc etc, the options available I will list out below.

The user selects the appropriate <option> and their Next & Following pay dates are automatically calculated, eg: Next pay: 30/08/2019, Following pay: 27/09/2019. The user has the option to edit these fields if they'd like to.

There's 3 input fields for Next pay date , and 3 input fields for Following pay date , (DD/MM/YYYY) fields.

The problem I'm having is in relation to the pay frequency options for the last week of every month, eg: Last Monday of the month, Last Tuesday of the month, right the way through to the Friday. The problem is that if for instance I'm on the last Thursday of the month, say the date is the 29/08/2019, and then I select the option Last Monday of the month , rather than automatically adding 1 month to the month field, it stays on the current month, and this is incorrect because you can't have a Next pay date that is in the past.

I'm using Moment JS , version 2.24.0, and using Vue JS version 2.6.10, there's also the package vee-validate for validation that's set up already.

I have a few methods that are in place to essentially figure out the user's next and following pay dates, the payFrequencyChange method listed below calculates each of the available pay frequency options that the user can select from. I've tried checking the code, and it seems like it should be calculating the month fields correctly based on the date, but isn't.

Here's the code in question:

    new Vue({
      el: '#application-form',
      data: {
        frequency: [{ value: 0, name: 'Last working day of month' }, { value: 1, name: 'Weekly' }, { value: 2, name: 'Four weekly' }, { value: 10, name: 'Specific Date' }, { value: 3, name: 'Bi-Weekly' }, { value: 9, name: 'Last Friday of month' }, { value: 5, name: 'Last Monday of month' }, { value: 6, name: 'Last Tuesday of month' }, { value: 7, name: 'Last Wednesday of month' }, { value: 8, name: 'Last Thursday of month' }],
        NextPaydateError: false,
        FollowingPaydateError: false,
        formData: {
          EmpPayFrequency: '',
          NextPaydate: '',
          FollowingPaydate: '',
          NextPaydateDay: '',
          NextPaydateMonth: '',
          NextPaydateYear: '',
          FollowingPaydateDay: '',
          FollowingPaydateMonth: '',
          FollowingPaydateYear: ''
        }
      },
      methods: {

        /**
         * Switch fields
         */
        switchToField(fieldSwitchName, fieldValue, fieldLength) {
          if (String(fieldValue).length >= fieldLength) {
            this.$refs[fieldSwitchName].focus();
          }
        },

        /**
         * Leading Zero
         * @param {int} input
         * @param {bool} years
         */
        leadingZeros: function leadingZeros(input, years = false) {
          if (!years) {
            if (String(input).length === 1) return '0' + input
          } else {
            if (String(input).length === 2) {
              if (parseInt(input) > 50 && parseInt(input) < 100) {
                return '19' + input
              }
            }
          }
          return input
        },

        /**
         * Next Pay Date Change
         */
        nextPayDateChange: function nextPayDateChange() {
          string = this.formData.NextPaydateYear + '-' + this.formData.NextPaydateMonth + '-' + this.formData.NextPaydateDay
          date = moment(string).format('DD/MM/YYYY')
          if (this.formData.NextPaydateYear === '') return
          this.NextPaydateError = (date === 'Invalid date') ? true : false
          this.formData.NextPaydate = date
        },

        /**
         * Following Pay Date Change
         */
        followingPayDateChange: function followingPayDateChange() {
          nextDate = this.formData.NextPaydateYear + '-' + this.formData.NextPaydateMonth + '-' + this.formData.NextPaydateDay
          followingDate = this.formData.FollowingPaydateYear + '-' + this.formData.FollowingPaydateMonth + '-' + this.formData.FollowingPaydateDay
          if (!moment(followingDate).isAfter(moment(nextDate))) {
            this.FollowingPaydateError = true
            return
          }
          date = moment(followingDate).format('DD/MM/YYYY')
          if (this.formData.FollowingPaydateYear === '') return
          this.FollowingPaydateError = (date === 'Invalid date') ? true : false
          this.formData.FollowingPaydate = date
        },

        /**
         * Find Last Working Day
         * @param {bool} nextMonth
         */
        lastBusinessDay: function lastBusinessDay(nextMonth) {
          dateOffset = {
            'Saturday': 1,
            'Sunday': 2
          }
          currentDate = new Date()
          date = new Date(currentDate.getFullYear(), currentDate.getMonth() + (nextMonth ? 2 : 1), 0)
          lastDay = date.toLocaleString('en-GB', {
            day: 'numeric'
          })
          lastWeekday = date.toLocaleString('en-GB', {
            weekday: 'long',
          })
          return dateOffset[lastWeekday] ? lastDay - dateOffset[lastWeekday] : lastDay
        },

        /**
         * Find Last Weekday
         * @param {object} monthMoment
         * @param {int} dayInt
         */
        lastWeekdayOfMonth: function weekly(monthMoment, dayInt) {
          var lastDay = monthMoment.endOf('month').startOf('day')
          for (let i = 0; i <= 10; i++) {
            if (lastDay.day() === dayInt) {
              return lastDay
            } else {
              lastDay.subtract(1, 'days')
            }
          }
        },

        /**
         * Weekly Workouts
         */
        weekly: function weekly(year, month, date, day) {
            date = new Date()
            offset = 4
            result = null
            if ('undefined' === typeof day || null === day) {
                day = 5
            }
            if ('undefined' === typeof year || null === year) {
                year = date.getFullYear()
            }
            if ('undefined' === typeof month || null === month) {
                month = date.getMonth()
            }
            do {
                result = new Date(year, month, date.getDate() + offset)
                offset++
            } while (result.getDay() !== day)
            return result
        },

        /**
         * Pay Frequency Change
         * @param {int} value
         */
        payFrequencyChange: function payFrequencyChange(value) {
          var elems = document.querySelectorAll('.dobbox.is-invalid')
          if (typeof elems === 'object') {
            elems.forEach.call(elems, function(el) {
              el.classList.remove('is-invalid')
            });
          }
          currentDate = new Date()
          switch (parseInt(value)) {
            case 0: // last working day
              next = {
                day: this.lastBusinessDay(false),
                month: currentDate.getMonth() + 1,
                year: currentDate.getFullYear()
              }
              following = {
                day: this.lastBusinessDay(true),
                month: ((currentDate.getMonth() + 2) === 13) ? 1 : currentDate.getMonth() + 2,
                year: ((currentDate.getMonth() + 2) === 13) ? currentDate.getFullYear() + 1 : currentDate.getFullYear()
              }
              break
            case 1: // weekly
              next = this.weekly(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 5)
              follow = new Date(this.weekly(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 5))
              following = follow.setDate(follow.getDate() + 7)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 2: // four weekly
              next = this.weekly(currentDate.getFullYear(),currentDate.getMonth(), currentDate.getDate() + 4)
              d = new Date(this.weekly(currentDate.getFullYear(),currentDate.getMonth(), currentDate.getDate() + 4))
              d.setDate(d.getDate() + 28)
              following = d
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 10: // specific date
              next = { day: '', month: '', year: '' }
              following = { day: '', month: '', year: '' }
              break
            case 3: // bi-weekly
              next = { day: '', month: '', year: '' }
              following = { day: '', month: '', year: '' }
              break
            case 9: // last friday
              next = this.lastWeekdayOfMonth(moment(), 5)
              following = this.lastWeekdayOfMonth(moment().add(1, 'months'), 5)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 8: // last thursday
              next = this.lastWeekdayOfMonth(moment(), 4)
              following = this.lastWeekdayOfMonth(moment().add(1, 'months'), 4)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 7: // last wednesday
              next = this.lastWeekdayOfMonth(moment(), 3)
              following = this.lastWeekdayOfMonth(moment().add(1, 'months'), 3)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 6: // last tuesday
              next = this.lastWeekdayOfMonth(moment(), 2)
              following = this.lastWeekdayOfMonth(moment().add(1, 'months'), 2)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
            case 5: // last monday
              next = this.lastWeekdayOfMonth(moment(), 1)
              following = this.lastWeekdayOfMonth(moment().add(1, 'months'), 1)
              next = {
                day: moment(next).format('DD'),
                month: moment(next).format('MM'),
                year: moment(next).format('YYYY')
              }
              following = {
                day: moment(following).format('DD'),
                month: moment(following).format('MM'),
                year: moment(following).format('YYYY')
              }
              break
          }
          // Populate new dates
          this.formData.NextPaydateDay = this.leadingZeros(next.day)
          this.formData.NextPaydateYear = next.year
          this.formData.NextPaydateMonth = this.leadingZeros(next.month)
          this.formData.FollowingPaydateDay = this.leadingZeros(following.day)
          this.formData.FollowingPaydateYear = following.year
          this.formData.FollowingPaydateMonth = this.leadingZeros(following.month)
          setTimeout(function () { // Prevent validation errors
            this.NextPaydateError = this.FollowingPaydateError = false
          }.bind(this), 10)
        }

      },
      watch: {
        'formData.NextPaydateYear': function formDataNextPaydateYear() {
          this.nextPayDateChange()
        },
        'formData.FollowingPaydateYear': function formDataFollowingPaydateYear() {
          this.followingPayDateChange()
        }
      }
    })

So with the above, everything will work perfectly fine as it's the start of the month, however, if you update your computer's time/date to be for instance, 29th August 2019, then when selecting the options: Last Monday - Thursday, it should increment the Next month, and Following month fields, but when selecting the Last Friday, it should remain on the current month, unless it's 3 days before the end of the month and then it should also increment.

I understand that this is a lot to take in, and thus have prepared a Code Pen in addition:

https://codepen.io/sts-ryan-holton/pen/rXGzox

Some help would be appreciated here, this isn't something that I've written so aren't entirely 100% sure how to fix/add this critical bit of functionality.

Answer 1

You can get the required feature by changing couple of things in the lastWeekdayOfMonth function as below

lastWeekdayOfMonth: function weekly(monthMoment, dayInt) {
    var lastDay = moment(monthMoment).endOf('month').startOf('day')
    var result = this.__lastWeekdayOfMonth(lastDay, dayInt)
    if( result.isBefore(monthMoment) ) {
        lastDay = moment(lastDay).add(1, 'month')
        result = this.__lastWeekdayOfMonth(lastDay, dayInt)
    }
    return result
},
__lastWeekdayOfMonth: function __weekly(lastDay, dayInt) {
    for (let i = 0; i <= 10; i++) {
        if (lastDay.day() === dayInt) {
            return lastDay
        } else {
            lastDay.subtract(1, 'days')
        }
    }
},

Here I have modularized the code a bit and added another function which will do specific work.

And I am just checking if the result is before the given date go and check for the next month.