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 插件开发笔记整理
Jan 17 Javascript
JS定时器实例详细分析
Oct 11 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
如何判断php数组的维度
2013/06/10 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
新学期红领巾广播稿
2014/01/14 职场文书
社区母亲节活动记录
2014/03/06 职场文书
团支部建设方案
2014/05/02 职场文书
施工安全标语
2014/06/07 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
环保宣传语大全
2015/07/13 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技