javaScript日期时间工作中开发小功能记录总结

1、用element ui日期控件只能选择当前年之前的某年，不包含当前年；
需求例子：当前年是2023年，只能获取2022，2021，2020年

<el-date-picker
 v-model="certStateDate"
 placeholder="财报起始日期"
 type="year"
 value-format="yyyy"
 :picker-options="pickerOptions"
/>

<sccript>
export default {
	data() {
		pickerOptions: {
        disabledDate(time) {
          let YEAR = new Date().getFullYear() // 当前年
          return time.getTime() > new Date(JSON.stringify(YEAR - 1)) || time.getTime() < new Date(JSON.stringify(YEAR - 3)) // 要禁用的年份
        }
      }
	}
}
</script>

2、用js获取前一年或者后年一年

/**
param: {String} type: left:前面的年，right:后面的年
param: {Number} index:向前或者向后获取多少年
*/
const YEAR = function(type, index) {
	let CURRENT_YEAR = new Date().getFullYear() // 获取当前年
	if (type === 'left') {
		CURRENT_YEAR = new Date(new Date().setFullYear(CURRENT_YEAR - index)).getFullYear()
	}
	if (type === 'right') {
		CURRENT_YEAR = new Date(new Date().setFullYear(CURRENT_YEAR + index)).getFullYear()
	}
	return CURRENT_YEAR
}
YEAR('left', 1) // 2022
YEAR('left', 1) // 2021
YEAR('right', 1) // 2024

3、获取今日、本周、本月、本年的时间范围

/**
 * 获取某日的时间戳范围
 * @param {string|number|object} [date] 特定格式化的时间
 * @returns {array} 解析好之后的时间戳范围
 */
export function getDayRange(date = new Date()) {
  date = dealTime(date, 'object')
  const startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate())
  const endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, -1)
  return [startTime.getTime(), endTime.getTime()]
}

/**
 * 获取某周的时间戳范围
 * @param {string|number|object} [date] 特定格式化的时间
 * @returns {array} 解析好之后的时间戳范围
 */
export function getWeekRange(date = new Date()) {
  date = dealTime(date, 'object')
  const daysInWeek = 7
  const day = date.getDay()
  // Date.prototype.getDay() 的返回值为 0-6，0 表示周日
  const week = day === 0 ? 6 : day - 1
  const startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() - week)
  const endTime = new Date(date.getFullYear(), date.getMonth(), (daysInWeek - week) + date.getDate(), 0, 0, -1)
  return [startTime.getTime(), endTime.getTime()]
}

/**
 * 获取某月的时间戳范围
 * @param {string|number|object} [date] 特定格式化的时间
 * @returns {array} 解析好之后的时间戳范围
 */
export function getMonthRange(date = new Date()) {
  date = dealTime(date, 'object')
  const startTime = new Date(date.getFullYear(), date.getMonth(), 1)
  const endTime = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, -1)
  return [startTime.getTime(), endTime.getTime()]
}

// 获取本年度时间范围
export const getYear = () => {
  let startTime = null
  let endTime = null
  let now = new Date()
  let newYear = now.getFullYear()
  startTime = new Date(newYear, 0, 1)
  // eslint-disable-next-line no-magic-numbers
  endTime = new Date(newYear, 11, 31, 23, 59, 59)
  return [startTime.getTime(), endTime.getTime()]
}

4、用element ui日期控件只能选择当前月份和当前月份后两个月；
需求例子：当前选中的是是2024年2月，后面月份只能选择2024年2月，2024年3月，2024年4月

// 时间选择范围限制, 只能选择当前月份和上一个月份
const disabledDate = time => {
  const currentMonthTimes = new Date(formData.monthBegin).getTime() // 当前月的时间戳
  // 当前月后两月的时间戳
  const nextMonthTimes = new Date(new Date(formData.monthBegin).getFullYear(), new Date(formData.monthBegin).getMonth() + 2).getTime()
  return time.getTime() > nextMonthTimes || time.getTime() < currentMonthTimes
}

5、用element ui日期控件只能选择1年之内的月份；
例如：现在是2024年1月份，只能选择2023年1月 — 2024年1月之间的月份

// 时间选择范围限制 1年
const disabledDate = time => {
  // eslint-disable-next-line no-magic-numbers
  const timeRange = 1 * 365 * 24 * 60 * 60 * 1000
  const now = new Date()
  const minTime = now - timeRange
  return time.getTime() < minTime || time.getTime() > now
}

6、用element ui日期控件只能当前月份和之前的三个月
例如：现在是2024年1月份，只能选择2024年1月、2023年10，11，12月

const disabledDate = time => {
  // eslint-disable-next-line no-magic-numbers
  const timeRange = 3 * 30 * 24 * 60 * 60 * 1000 // 三个月的时间（毫秒）
  const now = new Date() // 当前时间
  const minTime = new Date(now.getTime() - timeRange) // 计算三个月前的时间
  return time.getTime() < minTime.getTime() || time.getTime() > now.getTime()
}