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

简介: 1.html文件,index.html Title body{position: absolute;width: 100%;height: 100%} ul{list-style: none;margin: 0}   查看效果时候把浏览器调成手机模式 2.
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);

  

 

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

个人博客 :很多好用的 npm 包 , 可以看看  https://gilea.cn/ 

http://www.cnblogs.com/jiebba    我的博客,来看吧!

github:  https://github.com/longfei59418888/vui   (很不错的vue2.0组件库,记得给一个 start,以后有一起讨论,各种好组件)

相关文章
|
5月前
|
前端开发 JavaScript
JavaScript日历制作并实现拖动选择日期
JavaScript日历制作并实现拖动选择日期
44 0
|
9月前
|
前端开发 JavaScript
jQuery仿QQ音乐播放器
jQuery仿QQ音乐播放器
35 0
|
JavaScript 前端开发
利用Javascript制作轮播图最终版--滑动效果
JS最快速度制作滑动效果的轮播图 前面几篇博客一直在讲轮播图的制作,这篇博客是最终版,实现轮播图的滑动效果。如图: 在这里插入图片描述 HTML代码: &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;ul class=&quot;min_box&quot; id=&quot;banner&quot;&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt; &lt;li class=&quot;banner&quot;&gt;&lt;/li&gt;
利用Javascript制作轮播图最终版--滑动效果
|
Serverless
【Axure教程】用中继器做手机版日期选择器和手机日历
【Axure教程】用中继器做手机版日期选择器和手机日历
【Axure教程】用中继器做手机版日期选择器和手机日历
|
JavaScript
jQuery仿小米手风琴案例
jQuery仿小米手风琴案例
114 0
jQuery仿小米手风琴案例
|
前端开发 JavaScript Android开发
前端jquery解决安卓手机端底部菜单栏被输入法顶上去的方案
前端jquery解决安卓手机端底部菜单栏被输入法顶上去的方案
89 0
|
JavaScript
jQuery仿苹果样式焦点图插件
在线演示 本地下载
770 0
|
JavaScript iOS开发 容器

热门文章

最新文章