1. The demand

Two questions need to be considered in order to realize the function of selecting natural week and natural month in this timeline

  1. Process the display of the week and month of the given time, such as 2021-07-29, the last month is 2021-07-01-2021-07-29, and the last week is 2021-07-26-2021-07-29
  2. Get the first and last day of the preceding natural month and week.

Solve the first problem first

2. Get the time range of month and week at the given time of JS

Deal with the idea of weekly parameters

New Date().getDay() gets the current week n, then subtract n * 24 * 3600 * 1000 (n days) from the timestamp to get the Monday timestamp

Handle the idea of a month parameter

The timestamp of the last day of the current time is equal to the first day of the nextMonth minus 24 * 3600 * 1000 const nextMonth = new Date().getmonth () + 1 to get the month of the nextMonth as n const nextDate1 = Date.setmonth (nextMonth, 1) set the time to the first day of the nextMonth const result = nextdate1.gettime () -24 * 3600 * 1000 gets the last day of the month

In the code

const getDisplayTime = (type, time, displayTimeFormat = 'YYYY year MM month DD day ') = > {
  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) + The '-' + moment(date).format(displayTimeFormat)
    case 'month':
      let nextMonth = date.getMonth() + 1 // 0-11, +1 indicates the next month
      date.setMonth(nextMonth, 1) // Set the current date to the first of the next month
      let nextMonthFirstDayTime = date.getTime() // The first of the next month corresponds to milliseconds
      let theMonthLastDayTime = nextMonthFirstDayTime - oneDayTime // The first of next month minus one day is exactly the last day of the month
      let monthLastday = new Date(theMonthLastDayTime)
      const end = moment(monthLastday).format(displayTimeFormat)
      return moment(monthLastday.setMonth(monthLastday.getMonth(), 1)).format(displayTimeFormat) + The '-' + end
  }
}
Copy the code
    console.log(getDisplayTime('today'.'2021-07-29')) // July 29, 2021
    console.log(getDisplayTime('week'.'2021-07-29')) // July 26, 2021 -- July 29, 2021
    console.log(getDisplayTime('month'.'2021-07-29'))// July 1, 2021 -- July 31, 2021
Copy the code

The moment in the code formats moment.js for the time

According to the idea above

3. Obtain the timeline list

// Generates a time range list according to the time scale today week month
export const getRangeTimeList = (step, displayTimeFormat = 'YYYY year MM month DD day ') = > {
  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') {
    // Process the current week
    const day = dbegin.getDay() || 7
    lastWeek.label = moment(dbegin).format('MM-DD')
    lastWeek.timestamp = moment(dbegin).format('YYYY-MM-DD')
    lastWeek.tooltip = moment(new Date(dbegin.getTime() - (day - 1) * oneDayTime)).format(displayTimeFormat) + The '-' + moment(dbegin).format(displayTimeFormat)
    dbegin = new Date(dbegin.getTime() - day * oneDayTime)
    dend = new Date(dend.getTime() - 99 * 7 * oneDayTime)
  }
  if (step === 'month') {
    // Process the current 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) + The '-' + moment(dbegin).format(displayTimeFormat)
    dbegin = new Date(dbegin.getTime() - date * oneDayTime)
    // console.log('dbegin', dbegin)
    dend = new Date(dend.setMonth(dend.getMonth() - 99.1))}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()) {
      // Get the first 100 nature weeks
      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) + The '-' + moment(new Date(date.getTime() - (7 - currentDay) * oneDayTime)).format(displayTimeFormat)
      days.push(obj)
    } else if (step === 'month' && date.getDate() === dend.getDate()) {
      // Get the first 100 natural months
      let nextMonth = date.getMonth() + 1 // 0-11, next month
      date.setMonth(nextMonth) // Set the current date to the first of the next month
      date.setDate(1)
      let nextMonthFirstDayTime = date.getTime() // The first of the next month corresponds to milliseconds
      let theMonthLastDayTime = nextMonthFirstDayTime - oneDayTime // The first of next month minus one day is exactly the last day of the month
      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) + The '-' + end
      days.push(obj)
    }
    k = k + oneDayTime
  }
  if (step === 'week') {
    days.push(lastWeek)
  }
  if (step === 'month') {
    days.push(lastMonth)
  }
  return days
}
Copy the code

Enter getRangeTimeList(‘month’, ‘YYYY-MM-DD ‘) to get

4. Common methods of Date objects

GetDate () returns the day of the month (1-31) from the Date object.

GetDay () returns a day of the week (0 to 6) from the Date object.

GetMonth () returns the month (0 to 11) from the Date object.

GetFullYear () returns the year as four digits from the Date object.

GetYear () use getFullYear() instead.

GetHours () returns the hour of the Date object (0 to 23).

GetMinutes () returns the minutes of the Date object (0 to 59).

GetSeconds () returns the number of seconds (0 to 59) of the Date object.

GetMilliseconds () returns the milliseconds (0 to 999) of the Date object.

GetTime () returns the number of milliseconds since January 1, 1970.

SetDate () sets the Date of the month (1 to 31) in the Date object.

SetMonth () Sets the month (0 to 11) in the Date object.

SetFullYear () sets the year (four digits) in the Date object.

SetYear () use setFullYear() instead.

SetHours () sets the hours (0 to 23) in the Date object.

SetMinutes () sets the minutes (0 to 59) in the Date object.

SetSeconds () sets the number of seconds (0-59) in the Date object.

SetMilliseconds () sets milliseconds (0 to 999) in the Date object.

SetTime () sets the Date object in milliseconds.

ToString () converts a Date object to a string.

ToTimeString () converts the time part of the Date object to a string.

ToDateString () converts the Date part of the Date object to a string.