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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
小程序实现页面顶部选项卡效果
Nov 06 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
自己做矿石收音机
2021/03/02 无线电
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php数字游戏 计算24算法
2012/06/10 PHP
分享php分页的功能模块
2015/06/16 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python实现截屏的函数
2015/07/25 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python爬虫如何解决图片验证码
2021/02/14 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
迟到检讨书5000字
2014/01/31 职场文书
班级文化建设标语
2014/06/23 职场文书
广告业务员岗位职责
2015/02/13 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
Python 如何安装Selenium
2021/05/06 Python