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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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 地址栏信息的获取代码
2009/01/07 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python3实现单目标粒子群算法
2019/11/14 Python
python怎么对数字进行过滤
2020/07/05 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
python操作redis数据库的三种方法
2020/09/10 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
付款承诺函范文
2015/01/21 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers