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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python之py2exe打包工具详解
2017/06/14 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
金融管理专业求职信
2014/07/10 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
idea下配置tomcat避坑详解
2022/04/12 Servers
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python