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 相关文章推荐
解析js原生方法创建表格效率测试
Jul 08 Javascript
jquery的map与get方法详解
Nov 04 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
python海龟绘图实例教程
2014/07/24 Python
初学Python实用技巧两则
2014/08/29 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python分布式编程实现过程解析
2019/11/08 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
分享一个python的aes加密代码
2020/12/22 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
大学生毕业自荐信
2013/10/10 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
施工资料员岗位职责
2014/01/06 职场文书
酒店管理求职信
2014/06/09 职场文书
超市创意活动方案
2014/08/15 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
三方协议书
2015/01/27 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android