基于起止日期生成JavaScript/JQuery日期数组的实现方案

嘿，我刚好做过类似的需求，给你一套完整的实现方案，应该能直接解决你的问题！

核心思路 #

1. 用表单接收起始日期、结束日期和其他自定义输入字段
2. 借助Moment.js的日期操作方法，从起始日期开始，每次递增90天，直到超过结束日期
3. 把每个间隔日期和其他输入字段内容拼接成预格式化文本，渲染到页面上

完整代码示例 #

HTML结构（单页div组件） #

<div class="date-interval-generator">
  <div class="input-group">
    <label>起始日期：</label>
    <input type="date" id="startDate" required>
  </div>
  <div class="input-group">
    <label>结束日期：</label>
    <input type="date" id="endDate" required>
  </div>
  <div class="input-group">
    <label>自定义标题：</label>
    <input type="text" id="customTitle" placeholder="比如：季度报告">
  </div>
  <div class="input-group">
    <label>备注内容：</label>
    <textarea id="customNote" rows="2" placeholder="比如：需提交业绩数据"></textarea>
  </div>
  <button onclick="generateText()">生成文本</button>
  <div class="result-container" id="result"></div>
</div>

CSS（简单美化，可选） #

.date-interval-generator {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.input-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
input, textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.result-container {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  white-space: pre-line;
}

JavaScript逻辑（基于Moment.js） #

function generateText() {
  // 获取输入值
  const startDateStr = document.getElementById('startDate').value;
  const endDateStr = document.getElementById('endDate').value;
  const customTitle = document.getElementById('customTitle').value || '周期记录';
  const customNote = document.getElementById('customNote').value || '无备注';

  // 用Moment.js解析日期
  let currentDate = moment(startDateStr);
  const endDate = moment(endDateStr);

  // 校验日期合法性
  if (!currentDate.isValid() || !endDate.isValid()) {
    alert('请输入有效的日期！');
    return;
  }
  if (currentDate.isAfter(endDate)) {
    alert('起始日期不能晚于结束日期！');
    return;
  }

  // 生成间隔文本
  let resultText = '';
  let cycleIndex = 1;

  while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
    // 预格式化文本模板，可根据需求修改
    const cycleText = `--- ${customTitle} 第${cycleIndex}期 ---
周期日期：${currentDate.format('YYYY-MM-DD')}
备注：${customNote}

`;
    resultText += cycleText;

    // 递增90天
    currentDate.add(90, 'days');
    cycleIndex++;
  }

  // 渲染结果
  document.getElementById('result').textContent = resultText;
}

关键部分解释 #

1. 日期循环逻辑：用while循环判断当前日期是否在结束日期范围内（包含结束当天），每次用currentDate.add(90, 'days')递增90天
2. 预格式化文本：模板可以完全自定义，把你需要的其他输入字段都插入到对应的位置即可
3. 合法性校验：先检查日期是否有效，再判断起始日期是否早于结束日期，避免错误输入
4. Moment.js方法：format()用于统一日期格式，isBefore()/isSame()用于日期比较，add()用于日期递增

扩展提示 #

• 如果需要处理最后一个周期不足90天的情况，可以在循环结束前判断剩余天数，调整文本内容
• 可以把预格式化模板做成可配置的，让用户自定义文本格式
• 如果后续想替换Moment.js，也可以用原生Date对象结合setDate()方法实现类似逻辑

内容的提问来源于stack exchange，提问作者T. Olver