移动端类似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 滚动列表 ...
随机推荐
- 利用ICSharpCode.SharpZipLib.Zip进行文件压缩
官网http://www.icsharpcode.net/ 支持文件和字符压缩. 创建全新的压缩包 第一步,创建压缩包 using ICSharpCode.SharpZipLib.Zip; ZipOu ...
- uimodalpresentationformsheet resize ios7
CROHomeCRAAddController *temp =[[CROHomeCRAAddControlleralloc] init]; temp.modalTransitionStyle = UI ...
- 大数据分析的众包平台—Kaggle
众包(Jeff Howe,2006)是一种在互联网蓬勃发展的背景下产生的一种创新的生产组织形式.在这样的商业模式下,企业利用网络将工作分配出去,通过让更合适的人群参与其中来发现创意和解决技术问题.比较 ...
- Safari里使用JsonView
这是第三方开发的一个Safari的jsonView,和chrome以及FF功能类似,现在已经更新到1.1版了. 传送门:https://github.com/rfletcher/safari-json ...
- CURL 错误码 中文翻译
这几天用CURL做下载系统,经常会遇到一些问题,很多的错误还是和CURL的option有关.现在把这些错误码贴过来,方便查看一下. 错误代码列表 CURLE_UNSUPPORTED_PROTOCOL ...
- HDU 4832 Chess
Chess Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- hdu 3951(博弈规律)
题意:给定围成一个圈的硬币n枚,然后每次可以取出连续的1-k枚,谁取完最后一枚谁就获胜. 分析:对于第二个人当第一个人取完后,他可以取成对称的形式,所以第二个人必胜. 代码: #include< ...
- SPF详解2
什么是SPF? 这里的SPF不是防晒指数,而是指Sender Policy Framework.翻译过来就是发信者策略架构,比较拗口,通常都直接称为SPF. SPF是跟DNS相关的一项技术,它 ...
- Visual Studio 2005 移植 - WINVER，warning C4996, error LINK1104
Visual Studio 2005 移植 - WINVER,warning C4996, error LINK1104 一.WINVER Compile result: WINVER not d ...
- BITMAP CONVERSION FROM ROWIDS
在有些执行计划中,可以会看到 BITMAP CONVERSION FROM ROWIDS这样的东东,也许你会感觉奇怪,我没有使用位图索引怎么出现了bitmap.我通过一个sql和大家分析下原因:sql ...