npm i flatpickr --save

如果是非模块化直接引入的话，可以直接引入CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

或者直接把文件下载下来放在项目中引入本地路径。

首先需要创建 <input> 节点。

如果项目中有JQ的话，也可以协助操作实例。

$(".selector").flatpickr(option);

原生js创建实例：

var fp = flatpickr("#id", option);  // id选择器也可以改为Dom对象, option为配置对象
// 如果创建实例时未保存实例变量，可通过以下方式获取到实例对象。
var fp = document.querySelector("#id").flatpickr;

下文中的 fp 全部代表实例。

fp. selectedDates 所选日期的数组（或对象）

fp.currentYear 所选年份

fp.currentMonth 所选月份（0 到 11）

changeMonth（monthNum，is_offset = true）

参数二传入布尔值，默认为true。当为 true 时，参数一为相对月份；否则，参数一是绝对月份。

下面是例子

fp.changeMonth(1);    // 没有传参数二，为true。则改变所选月份为下一个月。
fp.changeMonth(-2);    // 修改月份为前两个月
fp.changeMonth(0, false);    // 此时传入false, 修改月份为一月。

clear()

清除所选月份

destroy()

销毁在该Dom元素上所绑定的实例

formatDate(Date, formatStr)

转换时间对象的格式。参数一为date对象，参数二为字符串形式的日期格式

jumpToDate(date)

将视图中的日期设置为 date， date 可以为字符串或者Date对象。

open()

显示（打开）日历面板

parseDate(dateStr, dateFormat)

将字符串格式的时间 或 时间戳 转换为Date对象

set(option, value)

添加配置到实例中。

setDate(date)

设置当前选中日期为date，date可以是字符串、Date对象 或 数组（用于范围性选择的日期）。

toggle()

显示（打开）/隐藏（关闭）日历面板。

本文就介绍到这里吧，至于上文提到的option（配置参数），有些比较难表达出来，还有些我也不太清楚用处，所以就不列出来了。大家可以在官网跟着官方例子操作，例子前后都有写有配置说明，还有实际效果可以看，可以说是很直观了。

一次项目中在寻找时间选择器的时候发现 flatpickr 这个插件很不错，在这里安利给大家，并附上一个简单的教程。效果图如下：官网地址：https://flatpickr.js.org/安装方式npm 安装方式的话就用以下方式npm i flatpickr --save如果是非模块化直接引入的话，可以直接引入CDN&amp;lt;link rel=&quot;stylesheet... 将下面内容注释 // protected static $css = [ // 'https://cdn. js delivr.net/npm/ flat pic kr /dist/ flat pic kr .min.css', // 'https://cdn. js delivr.net/npm/shortcut-button 通过npm安装 flat pic kr is delivered primarily via npm. Bower users: please use https://www.npm js .com/package/bower-npm-resolver 从 flat pic kr js delivr 提取最新的版本 引入 flat pic kr .css 样式 该 插件 基于jQuery开发，需要先引入jQuery 引入 flat pic kr .m npm install vue- flat pic kr -component --save Yarn安装： yarn add vue- flat pic kr -component <template> <div class="form-group row pb-4 border-bo... 下载 演示 GitHub flat pic kr 不依赖于任何库。更小的用户界面，但有很多主题。丰富的 API 和事件系统使其适用于任何环境。可用于 webpack ，也可作为 jQuery 插件 使用。 安装 flat pic kr 模块 使用 NPM 安装 flat pic kr 模块。包管理工具： https://www.npm js .com/package/bower-npm-resolver # using npm install npm i flat pic kr --save ```html <view class=" pic ker"> < pic ker mode="date" start="{{today}}" end="{{endDate}}" value="{{date}}" bindchange="onDateChange"> <view class=" pic ker-text">{{date | date}}</view> </ pic ker> </view> 其中，`mode="date"`表示 选择 器的类型为日期 选择 器，`start="{{today}}"`表示可 选择 的起始日期为今天，`end="{{endDate}}"`表示可 选择 的截止日期为endDate。`value="{{date}}"`表示 选择 器的默认值为date变量所代表的日期，`bindchange="onDateChange"`表示当 选择 器的值发生改变时，会调用onDateChange函数进行处理。`<view class=" pic ker-text">{{date | date}}</view>`表示 选择 器下方显示的文字为date变量所代表的日期（使用格式化器"date"来格式化日期）。 在 JS 文件中，可以通过setData()方法来更新date变量的值，从而实现 时间 选择 控件的功能。具体代码如下所示： ```javascript Page({ data: { today: new Date().getTime(), endDate: new Date(new Date().getTime() + 360 * 24 * 60 * 60 * 1000).getTime(), //可 选择 的截止日期为今天后的360天 date: null //表示当前 选择 的日期 onDateChange: function (e) { this.setData({ date: e.detail.value 其中，`today`代表今天的日期，`endDate`代表可 选择 的截止日期（这里设置为今天的后360天），`date`代表当前 选择 的日期，初始值为null。当用户 选择 日期时，会触发onDateChange函数，从而更新date变量的值。最后，可以通过格式化器"date"将date变量的值进行格式化，从而在页面上显示用户 选择 的日期。 以上代码仅供参考，具体实现方式还需根据实际需求进行调整。