在前端开发中，日期时间选择框是比较基础的组件之一。而 md-datetimepicker 是一个简单、易用的日期时间选择器，可以轻松渲染日期选择、时间选择和日期时间选择。本文将介绍如何使用 npm 包 md-datetimepicker 实现日期时间选择器功能。
1. 安装
在开始之前，需要安装 npm 包 md-datetimepicker。可以通过以下命令进行安装：
npm install md-datetimepicker
2. 使用
2.1 在 HTML 中引入
在 HTML 中引入 CSS 文件和 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
------------------------ ------------
----- ---------------- ------------------------------------------------------------------------ --
-------
------
------ ----------- --------------- --
------- --------------------------------------------------------------------------------
------- ------------------------
-------
-------2.2 在 JavaScript 中使用
在 JavaScript 中，实例化 mdDateTimePicker 类即可使用日期时间选择器功能：
-- -------------------- ---- -------
--- ------ - --- --------------------------
----- -------
----- ---------
--- -------- ------ -
------------------- ------- ----------------------- ------------
--
------- -------- -- ---
---
--- ---------- - --------------------------------------
------------------------------------ -------- -- -
----------------
---在实例化时，可以传入一些配置项：
type: 类型，支持 'date', 'time', 'moment', 'duration' 四种，分别表示日期、时间、moment 对象和时间间隔，默认为 'date'。init: 初始化日期时间，可以是 moment 对象或 Unix 时间戳，默认为当前时间。ok: 确认按钮回调函数，会传入选中的日期时间。cancel: 取消按钮回调函数。
调用 picker.toggle() 可以显示或隐藏日期时间选择器。
3. 示例
在上述代码中，我们已经可以使用日期时间选择器了。下面，我们将演示一个完整的可用示例，在这个示例中，我们将使用日期时间选择器实现在输入框中选择日期后输出所选日期，可以新建一个 index.html 文件，并在其中加入以下代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------ ------------
----- ---------------- ------------------------------------------------------------------------ --
-------
------
------ ----------- --------------- --
------- ----------------------------------------------------------------------
------- --------------------------------------------------------------------------------
--------
--- ------ - --- --------------------------
----- -------
----- ---------
--- -------- ------ -
---------------- - --------------------------
--
------- -------- -- ---
---
--- ---------- - --------------------------------------
------------------------------------ -------- -- -
----------------
---
---------
-------
-------在浏览器中打开 index.html，显示的页面如下图所示：
在输入框中选择日期时，控制台会输出选中的日期。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde73