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升级新版本后选择器的语法问题
Jun 02 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 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 常见郁闷问题答解
2006/11/25 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
更新修改后的Python模块方法
2019/03/03 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python中upper是做什么用的
2020/07/20 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
基于python实现操作redis及消息队列
2020/08/27 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
客房主管岗位职责
2013/12/09 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
晨会主持词
2014/03/17 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python