如何从jQuery多日期选择器（全年日历）获取选中日期并存入数组

嗨，我来帮你解决这个问题～jQuery multiDatesPicker其实自带了获取选中日期的API，咱们可以直接用它来拿到用户选的日期，再转换成适合存入数据库的格式。

完整实现代码 #

首先是你的HTML结构（包含日历容器和触发按钮）：

<li class="demo full-row">
  <h3>Full year</h3>
  <div id="full-year" class="box"></div>
  <div class="code-box">
    <h4>Code used</h4>
    <pre class="code prettyprint">
var today = new Date();
var y = today.getFullYear();
$('#full-year').multiDatesPicker({
  numberOfMonths: [3,4],
  defaultDate: '1/1/'+y
});
    </pre>
  </div>
</li>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

然后是JavaScript部分，重点实现myFunction来获取并处理日期：

// 初始化日历（你原有的代码）
var today = new Date();
var y = today.getFullYear();
$('#full-year').multiDatesPicker({
  numberOfMonths: [3,4],
  defaultDate: '1/1/'+y
});

// 定义获取选中日期的函数
function myFunction() {
  // 1. 使用multiDatesPicker的getDates方法获取选中的日期对象数组
  var selectedDateObjects = $('#full-year').multiDatesPicker('getDates');
  
  // 2. 转换为适合数据库存储的字符串格式数组（比如YYYY-MM-DD）
  var formattedDates = selectedDateObjects.map(function(date) {
    // 处理月份和日期，确保是两位数（比如1月→01，5号→05）
    var month = String(date.getMonth() + 1).padStart(2, '0');
    var day = String(date.getDate()).padStart(2, '0');
    return `${date.getFullYear()}-${month}-${day}`;
  });
  
  // 3. 这里就可以将formattedDates数组传给后端存入数据库了
  // 示例：在页面上显示结果
  document.getElementById("demo").innerHTML = `选中的日期数组：<br>${JSON.stringify(formattedDates)}`;
  
  // 如果要发送到后端，可使用fetch或AJAX
  // fetch('/your-api-endpoint', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ dates: formattedDates })
  // });
}

关键步骤说明 #

• 获取选中日期：$('#full-year').multiDatesPicker('getDates')是插件自带的方法，会直接返回一个Date对象数组，每个对象对应用户选中的日期。
• 格式标准化：数据库通常偏好YYYY-MM-DD这种统一格式，所以我们用map遍历日期对象，通过padStart补全月份/日期的位数，确保格式规范。
• 存入数据库：转换后的formattedDates是字符串数组，你可以通过后端接口把它存入数据库——比如用JSON类型字段直接存储数组，或者拆分后存入关联表，具体看你的业务需求。

内容的提问来源于stack exchange，提问作者Jadheer