在HTML5中，<input type="date"> 是一个允许用户选择日期的控件。如果你希望设置这个控件只允许用户通过下拉日历来选择日期，而不允许他们直接在输入框中修改日期，你可以使用 readonly 属性。然而，HTML5 的 <input type="date"> 控件本身并没有 readonly 属性，这意味着用户总是可以在输入框中输入或修改日期。

为了实现类似 readonly 的效果，你可以采取以下方法：

  1. 使用JavaScript来禁用输入框的编辑功能。当用户尝试在输入框中输入时，你可以清空输入框的内容，并可能显示一个提示信息。

  2. 完全隐藏输入框，并显示一个只读的日期显示，然后使用JavaScript来处理日期的选择逻辑。

下面是一个简单的示例，展示如何使用JavaScript来禁用用户在 <input type="date"> 控件中的输入：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Readonly Date Input</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var dateInput = document.getElementById('dateInput');
  dateInput.addEventListener('input', function(e) {
    // 清空输入框
    e.target.value = '';
    alert('不允许直接修改日期，请使用下拉日历来选择日期。');
  });
});
</script>
</head>
<body>

<input type="date" id="dateInput" onfocus="this.removeAttribute('readonly');">

</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

在这个示例中，当用户尝试在日期输入框中输入时，输入会被清空，并显示一个警告信息。不过，这种方法并不是完美的，因为用户仍然可以通过浏览器的开发者工具来绕过这个限制。如果需要更严格的控制，你可能需要考虑使用自定义的日期选择组件。