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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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
如何给phpadmin一个保护
2006/10/09 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
json数据的列循环示例
2013/09/06 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python管理Windows服务小脚本
2018/03/12 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
代办出身证明书
2014/10/21 职场文书
2014年应急工作总结
2014/12/11 职场文书
开业典礼致辞
2015/07/29 职场文书