清除 datetime-local 与 required

Question

我在 HTML5 中遇到本地日期时间选择器的问题。我想用清除按钮清除日期时间，但这是不可能的，因为输入中的“必需”功能不允许。我将让一段代码来查看差异。一种是必需的，一种是不需要的。你知道如何保留“必需”并清除从 ex: "15/03/2022 00:00 AM" 到 mm/dd/yyyy --:-- -- 的输入吗？谢谢。

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

    <input type="datetime-local" name="start_timestamp" id="start_timestamp" required>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

Answer 1

所需的属性负责是否显示重置按钮。如果设置了 required，则必须以编程方式解决重置问题。您为类型 datetime-local 和 yourDateElement.valueAsDate = null 执行此操作。

const clearBtn = document.getElementById('clear-btn');
clearBtn.addEventListener('click', () => {
  const d =   document.getElementById('start_timestamp');
  d.valueAsDate = null
})

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" value="" required>

<button id="clear-btn" onclick="clear()">clear</button>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

也适用于 Chrome

const clearBtn = document.getElementById('clear-btn');
clearBtn.addEventListener('click', () => {
  const d =   document.querySelector('input[type=datetime-local]');
  d.value = 0
})

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" value="" required>

<button id="clear-btn" onclick="clear()">clear</button>


<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">

Answer 2

恐怕不可能。

根据the documentation：

The control's UI varies in general from browser to browser.

在 Chrome 上，清除按钮 位于弹出框内，如果字段为 required，则不执行任何操作。但是在 Firefox 上（如下截图），清除按钮 位于 input 内，如果字段为 required.

则不会显示

您应该在每个 input 旁边添加自己的 清除按钮 :

function clearInput(id) {
  document.getElementById(id).value = "";
}

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<input type="datetime-local" name="start_timestamp" id="start_timestamp" required>
<button type="button" title="clear" onclick="clearInput('start_timestamp')">x</button>

<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
   name="meeting-time">
<button type="button" title="clear" onclick="clearInput('meeting-time')">x</button>

清除 datetime-local 与 required

Clear datetime-local with required

html

frontend

datetimepicker

datetime-local

也适用于 Chrome