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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python交互式图形编程实例(一)
2017/11/17 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python如何求圆的面积
2020/07/01 Python
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
经典c++面试题三
2015/07/08 面试题
接受捐赠答谢词
2014/01/27 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
新书发布会策划方案
2014/06/09 职场文书
典型事迹材料范文
2014/12/29 职场文书
法律意见书范文
2015/05/20 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL