怎么将默认起始时间值绑定到页面上

最新推荐文章于 2024-11-02 12:42:04 发布

赵不困888（合作私信）

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量78

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ZZZZZZZZjy/article/details/133943305

版权

也是我在工作中看到的代码

  watch: {
    'queryParams.yearMonth': {
      handler (newval) {
        this.queryParams.params.startTime = null
        this.queryParams.params.endTime = null
        function filltertime (time) {
          return new Date(time).getTime()
        }
        let Newval = newval
        const _this = this
        // 记录当前年份
        const nowYear = Number(new Date(+this.$getTime).toLocaleDateString().split('/')[0])
        // 记录当前月
        const nowMonth = Number(new Date(+this.$getTime).toLocaleDateString().split('/')[1])
        let CheckMonthJoin = ''
        const CheckMonth = Newval.split('').map((e, i) => {
          if (i <= 3) {
            CheckMonthJoin += e
          } else {
            if (i == 4 && e == 1) {
              CheckMonthJoin += `/${e}`
            } else if (i == 4 && e == 0) {
              CheckMonthJoin += '/'
            }
            if (i == 5) {
              CheckMonthJoin += e
            }
          }
          return CheckMonthJoin
        })[Newval.split('').length - 1]
        /** 记录选择的年份 */
        const checkYear = Number(CheckMonth.split('/')[0])
        /** 记录选择月份 */
        const checkMonth = Number(CheckMonth.split('/')[1])
        this.pickerOptions = {
          disabledDate: (time) => {
            const day = new Date(+this.$getTime).toLocaleDateString()
            const newday = day.split('/')
            let joinday
            let returnBoolean
            if (Newval.constructor === new Date().constructor) {
              Newval = Newval.toLocaleDateString().split('/')[0] + Newval.toLocaleDateString().split('/')[2]
            }
            if (filltertime(Newval) < filltertime(newday[1].length > 1 ? newday[0] + newday[1] : newday[0] + '0' + newday[1])) {
              // 月初
              const Oldday = Newval.split('')
              let joinMonthfirst = ''
              const Monthfirst = Oldday.map((e, i) => {
                if (i <= 3) {
                  joinMonthfirst += e
                } else {
                  if (i == 4 && e == 1) {
                    joinMonthfirst += `/${e}`
                  } else if (i == 4 && e == 0) {
                    joinMonthfirst += '/'
                  }
                  if (i == 5) {
                    joinMonthfirst += e
                  }
                }
                return joinMonthfirst
              })[Oldday.length - 1] + '/1'
              // 月末
              var joinMonthlast = ''
              const Monthlast = Oldday.map((e, i) => {
                if (i <= 3) {
                  joinMonthlast += e
                } else {
                  if (i == 4 && e == 1) {
                    joinMonthlast += `/${e}`
                  } else if (i == 4 && e == 0) {
                    joinMonthlast += `/`
                  }
                  if (i == 5) {
                    if (Oldday[4] == 1 && e == 2) {
                      joinMonthlast += e
                    } else {
                      e = Number(e) + 1
                      joinMonthlast += e
                    }
                  }
                }
                return joinMonthlast
              })[Oldday.length - 1] + '/1'
              // 当月为12月时处理
              const Month_12 = Monthlast.split('/')
              if (Month_12[1] == 12 && Monthfirst.split('/')[1] == 12) {
                Month_12[0] = Number(Month_12[0]) + 1
                Month_12[1] = '1'
                Month_12.join('/')
                returnBoolean = time.getTime() < new Date(Monthfirst).getTime() || time.getTime() >= new Date(Month_12).getTime()
              } else {
                returnBoolean = time.getTime() < new Date(Monthfirst).getTime() || time.getTime() >= new Date(Monthlast).getTime()
              }
              return returnBoolean
            } else {
              newday[2] = 1
              joinday = newday.join('/')
              returnBoolean = time.getTime() < new Date(joinday).getTime() || time.getTime() > this.$getTime
              return returnBoolean
            }
          }
        }
        if (nowYear >= checkYear && nowMonth >= checkMonth) {
          this.MonthchangeNumber = (nowYear - checkYear) * 12 + (nowMonth - checkMonth)
        } else if (nowYear >= checkYear && nowMonth < checkMonth) {
          this.MonthchangeNumber = (nowYear - checkYear) * 12 - (checkMonth - nowMonth)
        } else if (nowYear < checkYear && nowMonth >= checkMonth) {
          this.MonthchangeNumber = -((checkYear - nowYear) * 12 - (nowMonth - checkMonth))
        } else if (nowYear < checkYear && nowMonth < checkMonth) {
          this.MonthchangeNumber = -((checkYear - nowYear) * 12 + (checkMonth - nowMonth))
        }
        function getDefaultValue (statues) {
          const year = []
          const month = []
          newval.split('').map((e, i) => {
            if (i < 4) {
              year.push(e)
            } else {
              month.push(e)
            }
          })
          const newYMth = year.join('') + '-' + month.join('')
          let defaultDate = ''
          if (statues === 'start') {
            defaultDate = newYMth + '-01' + ' 00:00:00'
          } else {
            defaultDate = new Date(newYMth).toLocaleDateString()
          }
          return defaultDate
        }
        _this.DefaultValue = new Date(getDefaultValue('start'))
        _this.queryParams.params.startTime = getDefaultValue('start')

        const [y, m, d] = getDefaultValue().split('/')
        // 每月的最后一天
        const proDay = new Date(y, m, d - 1).toLocaleDateString().replaceAll('/', '-') + ' 23:59:59'
        // 当前选择的日期是不是本月
        const currentYM = new Date(_this.$getTime).toLocaleDateString().split('/').slice(0, 2).map(e => {
          if (e.length < 2) {
            e = '0' + e
          }
          return e
        }).join('')
        // console.log(newval, '1111','---------当前时间',_this.$getTime,'----------------当前年月：',currentYM)
        // console.log('当前结束时间',_this.formatDate(+_this.$getTime))
        _this.queryParams.params.endTime = newval== currentYM ? _this.formatDate(new Date(+_this.$getTime).setHours(23, 59, 59)) : proDay
      },
      deep: true
    }
  },

这是一个 Vue.js 模板插值表达式，用于将数据绑定到页面上。

_this 是 Vue 实例的上下文对象，表示当前 Vue 实例的实例变量。

queryParams.params.startTime 表示当前页面的查询参数中 startTime 的值。

getDefaultValue('start') 是一个方法调用，用于获取默认的起始时间值。这个方法可能需要根据当前的日期或其他条件来计算默认值。

总之，这段代码的作用是将默认起始时间值绑定到页面上，以便在页面上显示。

 newval.split('').map((e, i) => {
            if (i < 4) {
              year.push(e)
            } else {
              month.push(e)
            }
          })

这段代码是 Vue.js 中的一个方法，用于从传入的参数 newval 中提取年月信息，并将它们分别存储在数组 year 和 month 中。

具体来说，代码使用 split 方法将 newval 字符串分割成数组 newvalArray，然后使用 map 方法遍历这个数组。在遍历过程中，代码使用 i 变量来获取当前元素的索引，并根据索引值判断是年信息还是月信息。如果索引值小于 4，则将元素添加到 year 数组中；否则，将元素添加到 month 数组中。

最后，代码使用 join 方法将 year 和 month 数组合并为一个新的字符串 newYMth。

为什么只有当字符的索引位置小于4时，才会将该字符推入'year'数组中，小于4是什么意思

在JavaScript中，'i < 4'是一个条件判断，表示只有当变量i的值小于4时，后面的代码才会被执行。在这个代码片段中，它用于控制将字符推入'year'数组还是'month'数组。索引位置'i'在这里代表的是字符串中每个字符的位置，索引从0开始。因此，'i < 4'意味着只有当字符的位置在字符串的前四个位置（即索引从0到3）时，该字符才会被推入'year'数组。如果字符的位置在4或之后（即索引从4开始），那么该字符会被推入'month'数组。