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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
js网页右下角提示框实例
Oct 14 Javascript
javascript学习小结之prototype
Dec 03 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JavaScript继承与多继承实例分析
2018/05/26 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python socket 超时设置 errno 10054
2014/07/01 Python
python基础知识小结之集合
2015/11/25 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
python实现视频读取和转化图片
2019/12/10 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
详解python UDP 编程
2020/08/24 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
C#的几个面试问题
2016/05/22 面试题
软件配置管理有什么好处
2015/04/15 面试题
优秀团队获奖感言
2014/02/19 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
自荐信怎么写
2015/03/04 职场文书
2016新年问候语大全
2015/11/11 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js