HTML日期选择器在Safari无法直接选年月的问题及解决方案咨询

一、修复原生日期输入的问题 #

首先你当前的代码存在错误：value="() => moment().toDate()" 这种写法不会生效，原生日期输入框的value属性需要的是YYYY-MM-DD格式的具体日期字符串，而非函数。你可以用JS动态设置默认值：

document.getElementById('inputStartDate').value = moment().format('YYYY-MM-DD');

至于Safari原生日期选择器无法快速选择年月的问题，这是浏览器原生实现的限制，没法直接修改，但可以通过辅助联动方案解决：

1. 新增年份和月份的下拉选择框
2. 联动更新日期输入框的值，同时保留手动输入功能

示例代码：

<!-- 辅助年月选择控件 -->
<select id="yearSelect"></select>
<select id="monthSelect">
  <option value="1">1月</option>
  <option value="2">2月</option>
  <option value="3">3月</option>
  <option value="4">4月</option>
  <option value="5">5月</option>
  <option value="6">6月</option>
  <option value="7">7月</option>
  <option value="8">8月</option>
  <option value="9">9月</option>
  <option value="10">10月</option>
  <option value="11">11月</option>
  <option value="12">12月</option>
</select>

<!-- 原日期输入框 -->
<input type="date" id="inputStartDate" class="form-control">

// 动态生成年份选项（覆盖前后5年范围）
const currentYear = new Date().getFullYear();
const yearSelect = document.getElementById('yearSelect');
for (let i = currentYear - 5; i <= currentYear + 5; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = `${i}年`;
  yearSelect.appendChild(option);
}

// 联动更新日期输入框
function syncDateInput() {
  const year = yearSelect.value;
  const month = monthSelect.value.padStart(2, '0');
  // 默认选中当月第一天
  const day = '01';
  document.getElementById('inputStartDate').value = `${year}-${month}-${day}`;
}

// 绑定联动事件
yearSelect.addEventListener('change', syncDateInput);
monthSelect.addEventListener('change', syncDateInput);

// 初始化默认值
syncDateInput();

这样用户既可以通过下拉框快速选择年月，也能在日期输入框内手动输入日期。

二、第三方日期选择器推荐（兼容Chrome/Safari+支持手动输入） #

如果不想自己折腾原生联动逻辑，直接使用成熟的第三方组件更高效：

• Flatpickr：轻量级无依赖，支持年月快速选择、自定义日期格式，允许手动输入，完全兼容Safari和Chrome。初始化示例：

  flatpickr('#inputStartDate', {
    dateFormat: 'd/m/Y',
    allowInput: true, // 开启手动输入
    yearSelector: true, // 显示快速选年控件
    monthSelector: true // 显示快速选月控件
  });
  

• Pikaday：轻量简洁，支持集成moment.js处理日期格式，允许手动输入，跨浏览器兼容性优异。
• jQuery UI Datepicker：若项目已引入jQuery，这个组件成熟稳定，只需设置changeYear: true和changeMonth: true就能实现年月快速切换，同时支持手动输入。

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