除datetime-local外，JavaScript中是否有更优的日期选择实现方式？

1. 自定义原生JS日期选择器（轻量无依赖） #

完全不用第三方库，自己构建日期选择组件，能100%控制样式和逻辑，适合需要定制业务规则（比如禁止选节假日、限制日期范围）的场景。

示例代码：

<input type="text" id="dateInput" readonly placeholder="选择日期">
<div id="datePicker" style="display:none; border:1px solid #ccc; padding:10px; margin-top:5px;">
  <select id="yearSelect"></select>
  <select id="monthSelect"></select>
  <select id="daySelect"></select>
  <button onclick="confirmDate()">确定</button>
</div>

<script>
const dateInput = document.getElementById('dateInput');
const datePicker = document.getElementById('datePicker');
const yearSelect = document.getElementById('yearSelect');
const monthSelect = document.getElementById('monthSelect');
const daySelect = document.getElementById('daySelect');

// 初始化年份范围（近10年到下10年）
const currentYear = new Date().getFullYear();
for(let y = currentYear - 10; y <= currentYear + 10; y++){
  const option = document.createElement('option');
  option.value = y;
  option.textContent = y;
  yearSelect.appendChild(option);
}

// 初始化月份
for(let m = 1; m <= 12; m++){
  const option = document.createElement('option');
  option.value = m;
  option.textContent = m + '月';
  monthSelect.appendChild(option);
}

// 根据年月更新日期选项
function updateDays(){
  const year = parseInt(yearSelect.value);
  const month = parseInt(monthSelect.value);
  const lastDay = new Date(year, month, 0).getDate();
  
  daySelect.innerHTML = '';
  for(let d = 1; d <= lastDay; d++){
    const option = document.createElement('option');
    option.value = d;
    option.textContent = d + '日';
    daySelect.appendChild(option);
  }
}

// 绑定年月变化事件
yearSelect.addEventListener('change', updateDays);
monthSelect.addEventListener('change', updateDays);

// 触发选择器显示
dateInput.addEventListener('click', () => {
  datePicker.style.display = 'block';
  // 默认选中当前日期
  const now = new Date();
  yearSelect.value = now.getFullYear();
  monthSelect.value = now.getMonth() + 1;
  updateDays();
  daySelect.value = now.getDate();
});

// 确认选择日期
function confirmDate(){
  const year = yearSelect.value;
  const month = monthSelect.value.padStart(2, '0');
  const day = daySelect.value.padStart(2, '0');
  dateInput.value = `${year}-${month}-${day}`;
  datePicker.style.display = 'none';
}
</script>

这个方案的优势：完全自定义样式，可添加诸如“禁止选择过去日期”“关联起始/结束日期”等业务逻辑，不会受浏览器原生控件的样式限制。

2. 增强原生datetime-local控件（兼容+体验优化） #

如果不想完全自定义，也可以用JS增强原生datetime-local的功能，解决原生控件的痛点（比如样式不一致、默认值设置、日期范围限制）。

示例代码：

<input type="datetime-local" id="enhancedDatetime">

<script>
const datetimeInput = document.getElementById('enhancedDatetime');
const now = new Date();

// 设置默认值为当前时间（格式化符合datetime-local的要求：YYYY-MM-DDTHH:mm）
datetimeInput.value = now.toISOString().slice(0, 16);

// 限制只能选择未来7天内的日期
const maxDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
datetimeInput.max = maxDate.toISOString().slice(0, 16);

// 监听输入，格式化显示自定义格式
datetimeInput.addEventListener('input', (e) => {
  const selectedDate = new Date(e.target.value);
  // 用Intl.DateTimeFormat格式化成本地化日期
  const formattedDate = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  }).format(selectedDate);
  console.log('选中的日期：', formattedDate);
});
</script>

这个方案的优势：保留原生控件的易用性，同时用JS补充原生缺失的功能，适合需要快速实现且兼容大部分浏览器的场景。

3. 基于原生JS的日期解析与验证 #

如果是需要用户手动输入日期，再用JS做解析和验证，也是一种更灵活的方案，比原生控件更适配自定义输入格式。

示例代码：

<input type="text" id="customDateInput" placeholder="请输入YYYY-MM-DD">

<script>
const customInput = document.getElementById('customDateInput');

customInput.addEventListener('blur', (e) => {
  const inputValue = e.target.value.trim();
  // 正则验证日期格式
  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
  if(!dateRegex.test(inputValue)){
    alert('请输入正确的日期格式：YYYY-MM-DD');
    e.target.value = '';
    return;
  }
  
  // 验证日期有效性（比如2月30日这种无效日期）
  const date = new Date(inputValue);
  if(date.toString() === 'Invalid Date'){
    alert('输入的日期无效');
    e.target.value = '';
    return;
  }
  
  // 验证通过，可做后续处理
  console.log('有效日期：', date);
});
</script>

这个方案的优势：支持自定义输入格式，适合需要用户手动输入日期的场景，同时能严格控制输入的有效性。

内容的提问来源于stack exchange，提问作者賀皓群