移动端类似IOS的滚动年月控件（需要jQuery和iScroll）
一. 效果图
二. 功能介绍
支持滚动和点击选择年月。（目前只支持设置年月的最大最小值，不支持整体的最大最小值）
三. 代码
1. 在你的html中添加如下代码：
直接加载<body>里面，这里是插件渲染html的地方。
<div id="datePlugin"></div>
2. 在你的html中添加输入框：
可以是直接的一个输入框，也可以是input-group样式的。
我这里使用的时input-group，html是由JS加载的。
'<div class="item item-buydate input-group">' +
'<span class="input-group-span no-border-right" id="buydate-span">申购成交时间</span>' +
'<input class="txt-input txt-buydate no-border-left text-right" type="text" placeholder="请选择申购日期" readonly>' +
'</div>';
3. 调用方法：
$('.item-buydate').date({ title: '申购成交时间' });
4. JS源代码：
(function($) {
$.fn.date = function(options) {
var that = $(this);
var docType = $(this).is('input');
var nowdate = new Date();
var indexY = 1,
indexM = 1;
var initY = parseInt((nowdate.getYear() + '').substr(1, 2));
var initM = parseInt(nowdate.getMonth() + '') + 1;
var yearScroll = null,
monthScroll = null;
$.fn.date.defaultOptions = {
title: '请选择年月',
beginyear: 2000, //日期--年--份开始
endyear: nowdate.getFullYear(), //日期--年--份结束
beginmonth: 1, //日期--月--份结束
endmonth: 12, //日期--月--份结束
curdate: false, //打开日期是否定位到当前日期
mode: null, //操作模式（滑动模式）
event: "click", //打开日期插件默认方式为点击后后弹出日期
isShowByDefault: false,
isSetFinancialDefaultDateValue: false
}
var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
if (opts.isSetFinancialDefaultDateValue) {
if (opts.beginyear < opts.endyear) {
initY = ((opts.endyear - 1) + '').substr(2, 2);
} else if (opts.beginyear = opts.endyear) {
initY = (opts.endyear + '').substr(2, 2);
}
}
if (opts.isShowByDefault) {
showDatePicker()
}
that.bind(opts.event, showDatePicker);
function showDatePicker() {
createUL();
init_iScrll();
extendOptions();
that.blur();
refreshDate();
bindButton();
}
function refreshDate() {
yearScroll.refresh();
monthScroll.refresh();
resetInitDete();
yearScroll.scrollTo(0, initY * 40, 100, true);
monthScroll.scrollTo(0, initM * 40 - 40, 100, true);
}
function resetIndex() {
indexY = 1;
indexM = 1;
}
function resetInitDete() {
if (opts.curdate) {
return false;
} else if (that.val() === '') {
if (that.children('input').val() === '') {
return false;
}
initY = parseInt(that.children('input').val().substr(2, 2));
initM = parseInt(that.children('input').val().substr(5, 2));
} else {
initY = parseInt(that.val().substr(2, 2));
initM = parseInt(that.val().substr(5, 2));
}
}
function bindButton() {
resetIndex();
$("#yearwrapper ul li").unbind('click').click(function() {
if ($(this).hasClass("placeholder")) {
return false;
}
var target = $(this).prev('li');
yearScroll.scrollToElement(target[0]);
indexY = $(this).attr('data-params');
$("#dateconfirm").removeClass("disabled");
});
$("#monthwrapper ul li").unbind('click').click(function() {
if ($(this).hasClass("placeholder")) {
return false;
}
var target = $(this).prev('li');
monthScroll.scrollToElement(target[0]);
indexM = $(this).attr('data-params');
$("#dateconfirm").removeClass("disabled");
});
$("#dateshadow").unbind('click').click(function() {
$("#datePage").hide();
$("#dateshadow").hide();
});
$("#dateconfirm").unbind('click').click(function() {
if ($(this).hasClass('disabled')) {
return false;
}
if (indexY !== undefined && indexY !== '') {
indexY = parseInt(parseFloat(indexY).toFixed(0));
}
if (indexM !== undefined && indexM !== '') {
indexM = parseInt(parseFloat(indexM).toFixed(0));
}
var datestr = $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1) + "-" +
$("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
if (docType) {
that.val(datestr);
that.trigger('input');
} else {
that.children('input').val(datestr);
that.children('input').trigger('input');
}
$("#datePage").hide();
$("#dateshadow").hide();
});
$("#datecancle").click(function() {
$("#datePage").hide();
$("#dateshadow").hide();
});
}
function extendOptions() {
$("#datePage").show();
$("#dateshadow").show();
}
//日期滑动
function init_iScrll() {
var oldIndexY = parseInt(indexY.toFixed(0));
var oldIndexM = parseInt(indexM.toFixed(0));
var strY = $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().length - 1);
var strM = $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().length - 1);
yearScroll = new iScroll("yearwrapper", {
snap: "li",
vScrollbar: false,
onScrollMove: function() {
$("#dateconfirm").addClass("disabled");
},
onScrollEnd: function() {
indexY = (this.y / 40) * (-1) + 1;
$("#dateconfirm").removeClass("disabled");
}
});
monthScroll = new iScroll("monthwrapper", {
snap: "li",
vScrollbar: false,
onScrollMove: function() {
$("#dateconfirm").addClass("disabled");
},
onScrollEnd: function() {
indexM = (this.y / 40) * (-1) + 1;
$("#dateconfirm").removeClass("disabled");
}
});
}
function createUL() {
CreateDateUI();
$("#yearwrapper ul").html(createYEAR_UL());
$("#monthwrapper ul").html(createMONTH_UL());
}
function CreateDateUI() {
var str = '<div id="dateshadow"></div>' +
'<div id="datePage" class="page">' +
'<section>' +
'<div id="datetitle">' + opts.title + '</div>' +
'<div id="datemark"></div>' +
'<div id="datescroll">' +
'<div id="yearwrapper">' +
'<ul></ul>' +
'</div>' +
'<div id="monthwrapper">' +
'<ul></ul>' +
'</div>' +
'</div>' +
'</section>' +
'<footer id="dateFooter">' +
'<div id="setcancle">' +
'<ul>' +
'<li id="dateconfirm">确定</li>' +
'<li id="datecancle">取消</li>' +
'</ul>' +
'</div>' +
'</footer>' +
'</div>'
$("#datePlugin").html(str);
}
function createYEAR_UL() {
var str = '<li class="placeholder"> </li>';
for (var i = opts.beginyear; i <= opts.endyear; i++) {
str += '<li data-params="' + (i - opts.beginyear + 1) + '">' + i + '年</li>';
}
return str + '<li class="placeholder"> </li>';
}
function createMONTH_UL() {
var str = '<li class="placeholder"> </li>';
for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
if (i < 10) {
j = "0" + i;
} else {
j = i;
}
str += '<li data-params="' + (i - opts.beginmonth + 1) + '">' + j + '月</li>';
}
return str + '<li class="placeholder"> </li>';
}
}
})(jQuery);
5. CSS样式：
body,
div,
ul,
li,
h1 {
padding:;
margin:;
font-family: Microsoft YaHei, Arail, sans-serif;
} ul,
li {
list-style: none;
list-style-type: none;
} #dateshadow {
display: none;
position: absolute;
width: 100%;
height: 100%;
top:;
left:;
background: #000000;
opacity: 0.5;
} #datePage {
border-radius: 5px;
position: absolute;
top: 20%;
margin: 0 auto;
vertical-align: middle;
width: 80%;
height: 238px;
background: #FFFFFF;
z-index:;
} #datetitle {
text-align: center;
color: #666666;
padding: 20px 10px 12px;
line-height: 18px;
font-size: 18px;
} #datescroll {
background: #F8F8F8;
margin: 10px 18px;
border: 1px solid #dddddd;
border-radius: 3px;
height: 120px;
text-align: center;
line-height: 40px;
} .page {
display: none;
position: absolute;
top:;
left:;
bottom:;
right:;
width: 100%;
height: 100%;
overflow: hidden;
} #datescroll div {
float: left;
margin-top: 15px;
} #yearwrapper {
position: absolute;
margin-left: 16%;
left:;
top: 45px;
bottom: 60px;
width: 32%;
} #monthwrapper {
position: absolute;
margin-left: 28%;
left: 26%;
top: 45px;
bottom: 60px;
width: 32%;
} #yearwrapper ul li,
#monthwrapper ul li {
color: #333333;
font-size: 14px;
} #setcancle ul {
text-align: center;
line-height: 30px;
} #setcancle ul li {
border-radius: 3px;
float: left;
width: 32%;
height: 30px;
list-style-type: none;
font-size: 14px;
} #dateconfirm {
position: absolute;
background: #8e6dd1;
right: 12%;
color: #FFFFFF;
} #dateconfirm.disabled {
background: #dbdddd!important;
} #datecancle {
position: absolute;
background: #dbdddd;
left: 12%;
color: #FFFFFF;
} #datemark {
left: 10%;
width: 80%;
height: 30px;
position: absolute;
top: 104px;
background: #eeeeee;
} #datescroll_datetime {
display: none;
background: #F8F8F8;
width: 94%;
margin: 10px 3%;
margin-top: 10px;
border: 1px solid #E0E0E0;
border-radius: 4px;
height: 120px;
text-align: center;
line-height: 40px;
} #yearwrapper ul,
#monthwrapper ul {
width: 100%;
} #dateFooter {
width: 100%;
background: #fff;
height: 44px;
bottom: 0px;
position: absolute;
}
移动端类似IOS的滚动年月控件（需要jQuery和iScroll）的更多相关文章
- Xamarin iOS教程之页面控件
Xamarin iOS教程之页面控件 Xamarin iOS 页面控件 在iPhone手机的主界面中,经常会看到一排小白点,那就是页面控件,如图2.44所示.它是由小白点和滚动视图组成,可以用来控制翻 ...
- Unity3d IOS中的IGUI控件
Unity3d IOS中的IGUI控件 @灰太龙 群63438968 我讲一下IOS中用的UI,我们采用IGUI,需要使用IGUI的高版本,在Unity3d 4.2中也可以使用的! 之前IGUI有个 ...
- ios 中的UI控件学习总结（1）
UIKit框架提供了非常多功能强大又易用的UI控件 下面列举一些在开发中可能用得上的UI控件 UIButton 按钮 UILabel 文本标签 UITextField 文本输入框 UIImageVie ...
- WPF 滚动文字控件MarqueeControl
原文:WPF 滚动文字控件MarqueeControl WPF使用的滚动文字控件,支持上下左右滚动方式,支持设置滚动速度 XAML部分: <UserControl x:Class="U ...
- iOS:UITableView表格视图控件
UITableView:表格视图控件,继承滚动视图控件UIScrollView,(类似于UIPickerView选择器,它主要通过设置数据源代理和行为代理实现协议来设置单元格) 对表格的操作主要 ...
- iOS学习之UIPickerView控件的关联选择
接上篇iOS学习之UIPickerView控件的简单使用 接着上篇的代码 http://download.csdn.net/detail/totogo2010/4391870 ,我们要实现的效果如下: ...
- WPF自定义选择年月控件详解
本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- IOS版App的控件元素定位
前言 Android版App的控件元素可以通过Android studio自带的工具uiautomatorviewer来协助定位! IOS版App的控件元素可以通过Appium来实现(未实现),或ap ...
- Android RecyclerView滚动类控件修改、去掉滑动边界的阴影效果
前言 滚动类控件,大家都用的很多,如 RecyclerView.NestedSrollView.... 下面以recyclerView为例讲解,其他滚动控件也同理. RecyclerView 滚动列表 ...
随机推荐
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：4.安装Oracle RAC FAQ-4.3.Oracle 集群节点间连通失败
1.检查节点连通性的错误 [grid@linuxrac1 grid]$ ./runcluvfy.sh stage -post hwos -n linuxrac1,linuxrac2 -verbose ...
- Linux makefile教程之隐含规则九[转]
隐含规则 ———— 在 我们使用Makefile时,有一些我们会经常使用,而且使用频率非常高的东西,比如,我们编译C/C++的源程序为中间目标文件(Unix下是[.o] 文件,Windows下是[.o ...
- Asp.net 访问数据库的几种方式
ASP.NET中连接数据库的各种方法 连接SQL数据库的方法:(一).在Web.Config中创建连接字符串:1.<add name="ConnectionString" c ...
- 【python】python+behave自动化
留坑,后面再写,先写下request对http请求的校验.
- 什么是CC攻击，如何防止网站被CC攻击的方法总汇
CC攻击(Challenge Collapsar)是DDOS(分布式拒绝服务)的一种,也是一种常见的网站攻击方法,攻击者通过代理服务器或者肉鸡向向受害主机不停地发大量数据包,造成对方服务器资源耗尽,一 ...
- mac配置appium进行自动化测试
先去brew.sh这个网站,拷贝最新的下载安装命令,黏贴到终端里,回车,按提示下载安装. 安装完毕后,运行brewupdate 看看是否有更新,然后输入brew ios-webkit-debug-pr ...
- Red and Black ---路线问题
There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...
- Linux-sort用法
本文为转载,原地址:http://www.cnblogs.com/dong008259/archive/2011/12/08/2281214.html sort命令是帮我们依据不同的数据类型进行排序, ...
- FbinstTool万能启动超级简单教程
转载自http://bbs.wuyou.com/forum.php?mod=viewthread&tid=156383 秒到1分钟时间.如果你导入的是超过几百M以上的文件,相对的等待时间会更长 ...
- （phpmyadmin error）Login without a password is forbidden by configuration (see AllowNoPassword) in ubuntu
1.Go to /etc/phpmyadmin/config.inc.php and open it your favorite editor. 2.Search for below line of ...