html日期选择框代码

HTML日期选择框是一种非常方便的控件，使用户能够选择日期并将其输入到表单中。以下是一个简单的例子：

  <input type="date" name="birthday" id="birthday">

该代码将创建一个日期选择控件，其名称为“birthday”并具有“id”属性。用户可以单击选择器以打开日历并选择日期，其格式将根据所使用的Web浏览器而异。

您还可以使用“min”和“max”属性来限制所选日期的范围：

  <input type="date" name="trip-start" id="trip-start" 
    min="2021-08-29" max="2021-10-31">

在此示例中，用户只能选择2021年8月29日到2021年10月31日之间的日期。

您还可以使用JavaScript通过添加事件监听器来控制日期选择器的行为：

  <input type="date" name="event-date" id="event-date">

  <script>
    const datePicker = document.getElementById("event-date");
    datePicker.addEventListener("change", (event) => {
      console.log(event.target.value);
    });
  </script>

此代码将创建一个日期选择控件，当用户更改日期选择器中的值时，将记录选择的日期。通过使用事件监听器，您可以在用户更改日期时执行其他操作。

总之，HTML日期选择框是一种非常适合与表单一起使用的控件。无论您需要限制可选日期的范围，侦听日期更改事件，还是只是为用户提供一个方便的选择器，HTML日期选择框都是一个非常有用的工具。