JS生成Van-Picker 指定日期格式

项目中需要根据后台配置生成指定的Picker日期格式，按照自然月或者按照指定日期生成月区间。

1、第一种，自然月区间格式。

generateDateRanges(year) {
  const dateRanges = [];
  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();

  // 计算结束月份
  const endMonth = (year >= currentYear) ? currentMonth : 11;

  // 将日期格式化为数组对象
  for (let month = 0; month <= endMonth; month++) {
    const startDate = new Date(year, month, 1);
    const endDate = new Date(year, month + 1, 0);
    dateRanges.push({
      label: '${startDate.getMonth() + 1}月${startDate.getDate()}日至${endDate.getMonth() + 1}月${endDate.getDate()}日',
      value: [`${startDate.getFullYear()}${('0' + (startDate.getMonth() + 1)).slice(-2)}${('0' + startDate.getDate()).slice(-2)}', '${endDate.getFullYear()}${('0' + (endDate.getMonth() + 1)).slice(-2)}${('0' + endDate.getDate()).slice(-2)}']
    });
  }
  this.monthObjs = dateRanges
}

输出格式

[
  {
    label: '1月1日至1月31日',
    value: [ '20230101', '20230131' ]
  },
  {
    label: '2月1日至2月28日',
    value: [ '20230201', '20230228' ]
  },
  {
    label: '3月1日至3月31日',
    value: [ '20230301', '20230331' ]
  },
  {
    label: '4月1日至4月30日',
    value: [ '20230401', '20230430' ]
  },
  {
    label: '5月1日至5月31日',
    value: [ '20230501', '20230531' ]
  },
  {
    label: '6月1日至6月30日',
    value: [ '20230601', '20230630' ]
  }
]

实际效果

image

2、第二种，指定日期生成月区间。

customDate(selectYear, date) {
  const now = new Date();

  // 如果当前月份为一月，则需要计算去年的所有月份
  const length = now.getFullYear() === selectYear ? now.getMonth() : 12;
  const startOffset = date;

  // 定义结束日期的偏移量为起始日期偏移量减一
  const endOffset = startOffset - 1;

  // 定义起始月份和结束月份的数组
  const months = Array.from({ length: length }, (_, i) => ({
    start: new Date(i === 0 ? selectYear - 1 : selectYear, i, startOffset),
    end: new Date(i === 11 ? selectYear : selectYear, (i + 1) % 12, endOffset),
  }));

  // 将日期格式化为数组对象
  const monthObjs = months.map(({ start, end }) => ({
    label: '${start.getMonth() + 1}月${start.getDate()}日至${end.getMonth() + 1}月${end.getDate()}日',
    value: [
      '${start.getFullYear()}${(start.getMonth() + 1).toString().padStart(2, '0')}${start.getDate().toString().padStart(2, '0')}',
      '${end.getFullYear()}${(end.getMonth() + 1).toString().padStart(2, '0')}${end.getDate().toString().padStart(2, '0')}'
    ],
    isStart: end > now,
  }));

  this.monthObjs = monthObjs
}

输出结果

[
  {
    "label": "1月6日-2月5日",
    "value": ["20230106", "20230205"],
  },
  {
    "label": "2月6日-3月5日",
    "value": ["20230206", "20230305"],
  },
  {
    "label": "3月6日-4月5日",
    "value": ["20230306", "20230405"],
  },
  {
    "label": "4月6日-5月5日",
    "value": ["20230406", "20230505"],
  },
  {
    "label": "5月6日-6月5日",
    "value": ["20230506", "20230605"],
  }
]

实际效果

image