JavaScript 日期时间选择器一些小结


Posted in Javascript onApril 02, 2018

flatpickr 是一个轻量级、注重精益、由 UX 驱动和可扩展的 JavaScript 日期时间选择器。

JavaScript 日期时间选择器一些小结 

下载 演示 GitHub

flatpickr 不依赖于任何库。更小的用户界面,但有很多主题。丰富的 API 和事件系统使其适用于任何环境。可用于 webpack ,也可作为 jQuery 插件使用。

安装

安装 flatpickr 模块

使用 NPM 安装 flatpickr 模块。包管理工具: https://www.npmjs.com/package/bower-npm-resolver

# using npm install
npm i flatpickr --save

非模块环境

直接引入 flatpickr 文件

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

用法

如果你使用 webpack,你需要导入 flatpickr 。

// commonjs
const flatpickr = require("flatpickr");
// 如果可用,推荐使用 es 模块
import flatpickr from "flatpickr";

下面都是创建 flatpickr 实例的有效方法。

// 如果在框架中使用 flatpickr ,则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");

配置是可选的,并传入对象 {} 中。

jQuery

如果你使用 jQuery ,flatpickr 可以作为插件使用。

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

总结

以上所述是小编给大家介绍的JavaScript 日期时间选择器一些小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JQuery datepicker 使用方法
May 20 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue计算属性及使用详解
Apr 02 #Javascript
vue小白入门教程
Apr 02 #Javascript
Angular父组件调用子组件的方法
Apr 02 #Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 #Javascript
微信小程序block的使用教程
Apr 01 #Javascript
JavaScript动态加载重复绑定问题
Apr 01 #Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
You might like
用PHP读取超大文件的实例代码
2012/04/01 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python制作词云的方法
2018/01/03 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python3 爬取图片的实例代码
2018/11/06 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
广告设计应届生求职信
2014/03/01 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
写给老师的感谢信
2015/01/20 职场文书
销售内勤岗位职责
2015/02/10 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python