jquery仿苹果的时间/日期选择效果


Posted in Javascript onMarch 08, 2017

1.html文件,index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./jquery-1.12.4.min.js"></script>
 <script src="./pickDater.js"></script>
 <style>
 body{position: absolute;width: 100%;height: 100%}
 ul{list-style: none;margin: 0}
 </style>
</head>
<body>
<input id="pickDater" style="font-size: 50px;">
</body>
</html>

查看效果时候把浏览器调成手机模式

2.插件 链接地址:http://files.cnblogs.com/files/jiebba/pickDater.js ,

引用插件

3.调用插件

1.调用  日期

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:1, 
 separator:'/' //日期分割符
 }
 $('#pickDater').mPickDater(opt);

jquery仿苹果的时间/日期选择效果

2.调用 时间

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:2,
 separator:'/' //日期分割符
 }
 $('#pickDater').mPickDater(opt);

jquery仿苹果的时间/日期选择效果

3.调用 日期和时间

var opt={
 startY:1990, //开始时间
 endY:2050, //结束事件
 mPickerType:3,
 separator:'/' //日期分割符
 }
 $('#pickDater').mPickDater(opt);

jquery仿苹果的时间/日期选择效果

代码仅供参考,具体功能可以自己扩展。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
You might like
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
javascript继承之为什么要继承
2012/11/10 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
常用jQuery代码分享
2015/07/14 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
理解AngularJs指令
2015/12/10 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
浅谈Python中的闭包
2015/07/08 Python
Python画图学习入门教程
2016/07/01 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
请解释在new与override的区别
2012/10/29 面试题
初中英语演讲稿
2014/04/29 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
教师个人自我评价
2015/03/04 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
MySQL通过binlog恢复数据
2021/05/27 MySQL
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技