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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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中header和session_start前不能有输出原因分析
2013/01/11 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python 爬取小说并下载的示例
2020/12/07 Python
python中温度单位转换的实例方法
2020/12/27 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
中学生操行评语大全
2014/04/24 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
提档介绍信范文
2015/10/22 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android