有没有办法设置HTML Time的时间选择器的起始值

Question

有没有办法设置使用 HTML 时间选择器时弹出的时间选择器的默认起始值。

<input type="time" name="appt-time">

如果没有值，则默认为用户当前时间。我尝试使用 onfocus 设置值，但这实际上设置了值，这意味着当元素失去焦点时，它将设置一个值而不是保持为 null。

Answer 1

也许这对你有用

window.addEventListener('DOMContentLoaded',() => {
  const time = "15:05";
  let changed = false;
  const timePicker = document.querySelector('[name="appt-time"]');
  timePicker.defaultValue = null;
  timePicker.addEventListener('focus', (e) => {
    e.target.value = time;
  });
  timePicker.addEventListener('change', (e) => {
    changed = true;
  });
  timePicker.addEventListener('blur', (e) => {
    if (!changed) timePicker.value = null;
    else timePicker.defaultValue =  timePicker.value; 
  });
});

<input type="time" name="appt-time">

Answer 2

根据 MDN-Docs：

您可以通过在其中包含有效时间来设置输入的默认值 创建元素时的 value 属性，如下所示：

 
 <label for="appt-time">Choose an appointment time: </label>
 <input id="appt-time" type="time" name="appt-time" value="13:30" />
 
 

结合JavScript也可以这样设置：

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";