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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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字符串过滤,转换函数代码
2012/05/01 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
动手学习无线电
2021/03/10 无线电
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
在Python中实现字典反转案例
2020/12/05 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
大课间体育活动方案
2014/03/12 职场文书
主题班会演讲稿
2014/05/22 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
六一亲子活动感想
2015/08/07 职场文书