如何实现点击input时选中指定范围，自定义datatime-local时间格式功能

实现方案 #

你可以通过JS监听输入框事件+指定选中区间的方式实现需求，完整实现逻辑如下：

1. 基础说明

你提到的input type=datatime-local存在笔误，正确写法是input type="datetime-local"。如果仅需要年月日格式，优先使用type="date"原生输入框，不需要额外修改时间部分；如果必须用datetime-local组件，可按照下方方法实现点击选中指定范围的效果：

2. 代码实现

HTML 部分

<input type="datetime-local" id="dateInput" />

JS 逻辑（实现点击选中日期部分）

const dateInput = document.querySelector('#dateInput');
// 可先给输入框赋默认值，格式需符合datetime-local要求：yyyy-MM-ddTHH:mm
dateInput.value = '2024-01-01T00:00';

dateInput.addEventListener('click', function() {
  // 加setTimeout 0是为了等待输入框内置渲染完成，避免选中失效
  setTimeout(() => {
    // 前10位对应四位年的yyyy-mm-dd格式，若需要两位年的yy-mm-dd，可改为this.setSelectionRange(2, 8)
    this.setSelectionRange(0, 10);
  }, 0);
});

CSS 可选（隐藏datetime-local的时间部分，只显示年月日）

如果不需要显示时间部分，可加如下样式隐藏（适配webkit内核浏览器，Chrome/Edge等可直接生效）：

/* 隐藏时间相关的编辑区域 */
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit-time-separator {
  display: none;
}

3. 效果验证

点击输入框时，会自动选中指定的日期部分，和演示动图的效果一致。

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