jq仿苹果的时间/日期选择效果-阿里云开发者社区

开发者社区> 小结巴巴> 正文

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,以后有一起讨论,各种好组件)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一个超长时间的http api 的 nginx 超时错误 java.io.IOException: unexpected end of stream on Connection
一个长时间的http api 的 nginx 超时错误 直接访问IP是OK的。但是经过了中间一台域名机子,配置了nginx (基本上所有的超时时间timeout配置项都配置了足够的时间)的proxy_pass到这个IP上。
5646 0
SQL 中如何拼写时间类型
今天在作统计的时候,要在一用户表中查询出某一用户的注册时间,该字段数据原型为“20030101”,即为2003-01-01的意识,然后求出到该次查询为止这一用户的在网时间,因为DB2中的date()函数只支持date('2003-01-01')或date('01.01.2003')二种参数形式,所以不管用那种都要在数据原型中进行拆分,即分别拆分出年、月、日 ,然后重新拼凑在一起。
602 0
Android学习之Image操作及时间日期选择器
一、基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类。 1:        只需要记住图片在res/drawable-xxx下就行了。
781 0
从发薪时间看公司之司品
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/1841546 从发薪时间看公司之司品 作者:chszs 原创——转载请注明作者及出处 人有人品,公司也有品格,姑且称之为司品吧。
517 0
【51开放平台日志 2009年03月03日】51开放平台第三方小应用停机维护时间建议
【51开放平台日志 2009年03月03日】51开放平台第三方小应用停机维护时间建议 出自51.com developers wiki 跳转到: 导航, 搜索 通过我们的数据分析,51用户最少的时间段集中在:每天的凌晨4点~7点。
524 0
Timeline Portfolio - 时间轴作品集效果
  这里分享一个超炫的时间轴展示作品集效果。设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历。时间轴专门用来呈现出年代的一系列事件。您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把它们与日期相关联。
857 0
+关注
小结巴巴
高级前端工程师,喜欢写一些总结和例子
78
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载