npm 包 md-datetime-picker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要在页面中展示日期选择器、时间选择器等控件，而这些常用的控件可以通过使用 md-datetime-picker 这个 npm 包来实现，它是一个轻量级的日期时间选择器。

安装

在安装 md-datetime-picker 前，你需要确保你已经安装了 Node.js 和 npm。在命令行中输入以下命令来安装 md-datetime-picker：

npm i md-datetime-picker

导入

在需要使用 md-datetime-picker 的页面中，通过以下代码导入该包：

import 'md-datetime-picker/dist/mdDateTimePicker.min.css';
import mdDateTimePicker from 'md-datetime-picker';

这里我们需要先导入样式文件 mdDateTimePicker.min.css，再导入 md-datetime-picker 包。

基础用法

接下来，我们看一下 md-datetime-picker 的基本用法。

const picker = new mdDateTimePicker.default({
  type: 'date',
  init: new Date(),
});
picker.show();

上面的代码中，我们首先创建了一个 mdDateTimePicker 实例，设置了它的类型为日期选择器，初始值为当前日期，并通过 picker.show() 方法直接显示该选择器。

同时，我们还可以通过以下方法来监听选择器的更新事件：

picker.on('selected', function (date) {
  console.log(date);
});

其中，date 的值是选择器选择的日期或时间，这里输出了选择器选择的值方便调试。

高级用法

md-datetime-picker 不仅可以展示日期、时间选择器，还可以展示时区选择器、月份选择器等控件。

示例代码如下：

const picker = new mdDateTimePicker.default({
  type: 'month',
  format: 'MM/YYYY',
  future: moment().add(1, 'year').format('YYYY-MM-DD'),
  trigger: document.querySelector('#datePickerTrigger'),
});
picker.show();

在上面的代码中，我们创建了一个类型为月份选择器的 picker 实例，并设置了初始日期格式为 MM/YYYY，future 为当前日期后一年时间，以及 trigger，它指定了触发选择器的 DOM 元素。

总结

md-datetime-picker 是一个非常实用的前端库，它可以帮助我们快速、方便地实现日期、时间、时区、月份等多种选择器控件，相比于手写控件，使用它可以减轻我们的开发工作量，提高开发效率。

如果你想深入学习 md-datetime-picker，可以直接在 Github 上找到该库的源码和文档，进行更加详细的了解和学习。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056c0781e8991b448e5b5d