简介
日期/时间选择器是前端开发中常用的组件之一。它可以帮助用户方便地选择日期和时间，提升用户体验和数据填写准确性。
然而，在实际项目中，经常会遇到需要关闭日期/时间选择器的需求，例如只允许选择未来日期、限制时间段选择等等。本文将介绍如何构建一个基于 JavaScript 的日期/时间选择器，并实现关闭功能。
实现
HTML 结构
首先，我们需要构建一个基本的 HTML 结构。在这个例子中，我们使用 input 元素作为输入框，通过 type 属性指定为日期或时间类型。同时，我们还需要给输入框添加 id 属性，以便在 JavaScript 中进行操作。
<input type="date" id="datepicker"> <input type="time" id="timepicker">
JavaScript 代码
接下来，我们使用 JavaScript 构建日期/时间选择器。具体步骤如下：
- 获取到日期/时间选择器的 DOM 元素
- 给元素添加事件监听器，当用户选择日期/时间时触发
- 检查选择的日期/时间是否符合要求，如果不符合则弹出提示框，否则更新输入框的值
-- -------------------- ---- -------
-- -- --- --
----- ---------- - --------------------------------------
----- ---------- - --------------------------------------
-- -------
------------------------------------- -- -- -
-- -------
----- ------------ - --- -----------------------
-- --------
-- ------------- - --- ------- -
------------------
---------------- - ---
- ---- -
-- -------
---------------- - ----------------------------------- ----
-
---
------------------------------------- -- -- -
-- -------
----- ------------ - -----------------
-- --------
-- ------------- - ------- -- ------------ - -------- -
----------- - -- -- ----------
---------------- - ---
-
---在以上代码中，我们通过 new Date() 构造函数获取当前时间，以及 toISOString() 方法将时间格式化为 ISO 格式，方便后续操作。
CSS 样式
最后，我们可以通过 CSS 样式对日期/时间选择器进行美化。这里只是简单的修改了字体和颜色，你可以根据需求进行更改。
input[type="date"],
input[type="time"] {
font-family: Arial, sans-serif;
color: #333;
}总结
通过本文的介绍，我们学习了如何使用 JavaScript 实现一个基于输入框的日期/时间选择器，并实现了关闭功能。这个例子只是一个简单的示范，你可以根据自己的需求进行更改和扩展。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8741