当前位置：首页 > 资讯 > 技术文档

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

时间：2021-06-12 07:58 编辑：来源：阅读：
扫一扫，手机访问

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

[b]1.html文件，index.html[/b]

<!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>

查看效果时候把浏览器调成手机模式 [b]2.插件链接地址：[/b][url=http://files.cnblogs.com/files/jiebba/pickDater.js][b]http://files.cnblogs.com/files/jiebba/pickDater.js[/b][/url][b] ,[/b] 引用插件 [b]3.调用插件[/b] [b]1.调用日期[/b]

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

[img]http://files.jb51.net/file_images/article/201703/2017030814240128.gif[/img] [b]2.调用时间[/b]

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

[img]http://files.jb51.net/file_images/article/201703/2017030814240129.gif[/img] [b]3.调用日期和时间[/b]

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

[img]http://files.jb51.net/file_images/article/201703/2017030814240130.gif[/img] 代码仅供参考，具体功能可以自己扩展。以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：基于jQuery的日期选择控件
下一篇：jQuery之日期选择器的深入解析

资讯排行榜
更多>>