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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
Javascript实现简易天数计算器
May 18 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
DOM 基本方法
2009/07/18 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python 开发Activex组件方法
2009/11/08 Python
python删除文件示例分享
2014/01/28 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
学生就业推荐信
2013/11/13 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
技术合作协议书范本
2014/04/18 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS