JS Date给定时间 获取自然月周的时间轴

Posted 2021-08-29 星云-

1.需求

要实现这个时间轴的自然周、自然月的选择功能，需要思考两个问题

1. 处理给定时间的本周与本月时间的显示，如输入2021-07-29，最后一个月就是2021-07-01 -
   2021-07-29，最后一周就是2021-07-26 - 2021-07-29
2. 获取往前的自然月和周的第一天和最后一天（每周固定七天好处理，每月的天数不确定，需要特殊处理）

首先解决第一个问题

2.JS 给定时间 获取自然月、周的时间范围

处理周参数思路

new Date().getDay() 获取当前星期n, 然后时间戳减去n * 24 * 3600 * 1000 也就是n天的时间获得星期一的时间戳

处理月参数思路

当前时间的最后一天的时间戳等于下个月的第一天减去24 * 3600 * 1000
const nextMonth = new Date().getMonth() + 1 获取下个月的月份为n
const nextDate1 = date.setMonth(nextMonth, 1) 设置时间到下一个月一号
const result = nextDate1.getTime() - 24 * 3600 * 1000 获得本月的最后一天

上代码

const getDisplayTime = (type, time, displayTimeFormat = 'YYYY年MM月DD日') => {
  const oneDayTime = 24 * 3600 * 1000
  const date = new Date(time)
  switch (type) {
    case 'today':
      return moment(time).format(displayTimeFormat)
    case 'week':
      const currentDay = date.getDay() || 7
      return moment(new Date(date.getTime() - (currentDay - 1) * oneDayTime)).format(displayTimeFormat) + '-' + moment(date).format(displayTimeFormat)
    case 'month':
      let nextMonth = date.getMonth() + 1 // 0-11，+1表示下一个月
      date.setMonth(nextMonth, 1) // 设置当前日期为下个月的1号
      let nextMonthFirstDayTime = date.getTime() // 下个月一号对应毫秒
      let theMonthLastDayTime = nextMonthFirstDayTime - oneDayTime // 下个月一号减去一天，正好是这个月最后一天
      let monthLastday = new Date(theMonthLastDayTime)
      const end = moment(monthLastday).format(displayTimeFormat)
      return moment(monthLastday.setMonth(monthLastday.getMonth(), 1)).format(displayTimeFormat) + '-' + end
  }
}

	console.log(getDisplayTime('today', '2021-07-29')) // 2021年07月29日
    console.log(getDisplayTime('week', '2021-07-29')) //  2021年07月26日-2021年07月29日
    console.log(getDisplayTime('month', '2021-07-29'))//  2021年07月01日-2021年07月31日

代码中的moment为时间格式化moment.js

根据上面的思路

3.获取时间轴list

// 根据时间刻度 today week month 生成对应的时间段列表
export const getRangeTimeList = (step, displayTimeFormat = 'YYYY年MM月DD日') => {
  const oneDayTime = 24 * 3600 * 1000
  let days: any[] = []
  let dbegin = new Date(new Date().toLocaleDateString())
  let dend = new Date(new Date().toLocaleDateString())
  const lastWeek:any = {}
  const lastMonth:any = {}
  if (step === 'today') {
    dend = new Date(dend.getTime() - 100 * oneDayTime)
  }
  if (step === 'week') {
    // 处理当前这周
    const day = dbegin.getDay()
    lastWeek.label = moment(dbegin).format('MM-DD')
    lastWeek.timestamp = moment(dbegin).format('YYYY-MM-DD')
    lastWeek.tooltip = moment(new Date(dbegin.getTime() - day * oneDayTime)).format(displayTimeFormat) + '-' + moment(dbegin).format(displayTimeFormat)
    dbegin = new Date(dbegin.getTime() - day * oneDayTime)
    dend = new Date(dend.getTime() - 99 * 7 * oneDayTime)
  }
  if (step === 'month') {
    // 处理当前这月
    const date = dbegin.getDate()
    let current = new Date()
    lastMonth.label = moment(dbegin).format('MM-DD')
    lastMonth.timestamp = moment(dbegin).format('YYYY-MM-DD')
    lastMonth.tooltip = moment(current.setMonth(current.getMonth(), 1)).format(displayTimeFormat) + '-' + moment(dbegin).format(displayTimeFormat)
    dbegin = new Date(dbegin.getTime() - date * oneDayTime)
    dend = new Date(dend.setMonth(dend.getMonth() - 99))
  }
  let unixDb = dbegin.getTime()
  let unixDe = dend.getTime()
  for (let k = unixDe; k <= unixDb;) {
    const date = new Date(parseInt(String(k)))
    if (step === 'today') {
      const obj:any = {}
      obj.label = moment(date).format('MM-DD')
      obj.timestamp = moment(date).format('YYYY-MM-DD')
      obj.tooltip = moment(date).format(displayTimeFormat)
      days.push(obj)
    } else if (step === 'week' && date.getDay() === dbegin.getDay()) {
      // 获取前n个自然周
      const obj:any = {}
      obj.label = moment(date).format('MM-DD')
      obj.timestamp = moment(date).format('YYYY-MM-DD')
      const currentDay = date.getDay() || 7
      obj.tooltip = moment(new Date(date.getTime() - (currentDay - 1) * oneDayTime)).format(displayTimeFormat) + '-' + moment(new Date(date.getTime() - (7 - currentDay) * oneDayTime)).format(displayTimeFormat)
      days.push(obj)
    } else if (step === 'month' && date.getDate() === dbegin.getDate()) {
      // 获取前n个自然月
      let nextMonth = date.getMonth() + 1 // 0-11，下一个月
      date.setMonth(nextMonth) // 设置当前日期为下个月的1号
      date.setDate(1)
      let nextMonthFirstDayTime = date.getTime() // 下个月一号对应毫秒
      let theMonthLastDayTime = nextMonthFirstDayTime - oneDayTime // 下个月一号减去一天，正好是这个月最后一天
      let monthLastday = new Date(theMonthLastDayTime)
      const obj:any = {}
      obj.label = moment(monthLastday).format('MM-DD')
      obj.timestamp = moment(monthLastday).format('YYYY-MM-DD')
      const end = moment(monthLastday).format(displayTimeFormat)
      obj.tooltip = moment(monthLastday.setMonth(monthLastday.getMonth(), 1)).format(displayTimeFormat) + '-' + end
      days.push(obj)
    }
    k = k + oneDayTime
  }
  //将最后一周或者月push到时间轴list最后
  if (step === 'week') {
    days.push(lastWeek)
  }
  if (step === 'month') {
    days.push(lastMonth)
  }
  return days
}

输入getRangeTimeList(‘month’, ’ YYYY-MM-DD ') 得到

4.Date对象常用方法

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。

toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。