欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-01-24 11:11:05|栏目:jquery|点击:

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);

2.调用 时间

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

3.调用 日期和时间

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

代码仅供参考,具体功能可以自己扩展。

上一篇:JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

栏    目:jquery

下一篇:基于jQuery插件jqzoom实现的图片放大镜效果示例

本文标题:jquery仿苹果的时间/日期选择效果

本文地址:http://www.codeinn.net/misctech/50629.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有