jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载


Posted in Javascript onApril 19, 2016

我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用。

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

在线演示       源码下载

日期选择器datedropper

使用非常简单,分三步,

1、引入相关js和css文件。注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件。

<script src="jquery.js"></script> 
<script src="datedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="datedropper.css">

2、布置body中的html。

<input type="text" id="pickdate" />

3、调用datedropper

<script> 
$("#pickdate").dateDropper(); 
</script>

然后,就是可以根据需要适当配置一些选项。datedropper提供了如下基本选项设置:

animate:展示动画效果,当设置为true时,选择器面板中的日期会做动画滚动到当前日期,默认是true。

init_animation:点击弹出面板时的动画效果,有fadeIn(默认), bounce, dropDown三种效果。

format:格式化日期,我已经将默认的格式改成了Y-m-d。

lang:语言,我已经将插件默认的月份和星期翻译成中文语言了。

maxYear:最大年份,默认当前年份。

minYear:最小年份,默认1970。

yearsRange:年份范围,默认10年。

dateDropper还提供了皮肤样式的设置。

时间选择器timedropper

和日期选择器一样,使用也简单。

1、引入js和css文件。

<script src="jquery.js"></script> 
<script src="timedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="timedropper.css">

2、布置body中的html。

<input type="text" id="picktime" />

3、调用timedropper

<script> 
$("#picktime").timeDropper(); 
</script>

timeDropper提供了如下基本选项设置:

meridians:是否12小时制,默认是12小时制,设置为false则为24小时制。

format:格式化,HH:mm如02:12。

init_animation:动画形式,fadeIn(默认), dropDown。

setCurrentTime:自动设置当前时间。

timeDropper也提供了皮肤样式的设置。

jQuery移动端日期(datedropper)和时间(timedropper)选择器的内容就给大家介绍这么多,感兴趣的朋友可以查看效果演示,下载源码哦!

Javascript 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Vue.js实例方法之生命周期详解
Jul 03 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
php正则表达式学习笔记
2015/11/13 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
基于python生成器封装的协程类
2019/03/20 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
基于python实现对文件进行切分行
2020/04/26 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
公务员的自我鉴定
2013/10/26 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
教师工作失职检讨书
2014/09/18 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript