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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JavaScript this 深入理解
Jul 30 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
javascript实现密码验证
Nov 10 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
iscroll动态加载数据完美解决方法
Jul 18 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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(2)――PHP类型
2010/02/15 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python模拟登录验证码(代码简单)
2016/02/06 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python 创建一维的0向量实例
2019/12/02 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
委托函范文
2015/01/29 职场文书
北京爱情故事观后感
2015/06/12 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Python开发五子棋小游戏
2022/04/28 Python