在前端开发过程中，时间选择器是非常常见的工具之一，而 material-datetimepicker 是一个基于 Material Design 的时间选择器的 npm 包，这个包可以帮助我们快速地实现时间控件的功能。本文将详细介绍如何使用这个包。
安装
使用 npm 安装 material-datetimepicker 包的方式非常简单，只需在命令行中输入以下命令即可：
npm install material-datetimepicker --save
使用
material-datetimepicker 提供了非常丰富的 API， 包括格式化日期，设置时间范围，设置语言等，在此我们只介绍一下最基础的使用方法。
- 首先，在你的 html 文件中引入依赖的 js 和 css 文件
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ---------------- ------------------------------------------ --
-------
------
------ ----------- ------------------- --
------- --------------------------------------------------
-------
-------- 在 JavaScript 中调用 material-datetimepicker
var picker = new MaterialDatetimePicker({})
.on('submit', function(selectedDate) {
// do something with selectedDate
});
picker.open();- 接下来，我们就可以根据需求自定义配置了，比如：
-- -------------------- ---- ------- --- ------ - --- ------------------------ ----- --- ------- -- ---- ----- ----- -- ------ -------- --- ------- -- ------- ------- ----------- ------- -- -------- ----------- --- ---------- --- ----------- ---- --- --------------
通过上述代码我们可以实现如下效果：
总结
material-datetimepicker 是一个非常成熟的时间选择器 npm 包，除了我们上面提到的基础使用之外，还有很多高级功能可供使用。本文只是为了让大家对 material-datetimepicker 的基础使用和配置有个初步了解，如果你需要更多深入的探究和学习，可以查看它的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7381e8991b448d8f73