移动端类似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 滚动列表 ...
随机推荐
- 重拾Excel之为什么
现在如今想想自己,已经有许久许久没有充过电了.现在想好好地充电. 机遇总是垂青于有准备的人!
- 【转】shell脚本调试（bash trap support bashdb ）
原文网址:http://zhu8337797.blog.163.com/blog/static/170617549201122512712136/ 命 令 选 项 功 能 bash –x 脚本名 回显 ...
- 别人的的MYSQL学习心得（十五） 日志
我的MYSQL学习心得(十五) 日志 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- git 创建一个新分支，并将一个分支内容复制给创建的新分支
git checkout -b newBranchName
- suse linux中apache+php服务器安装
主站下载源码 tar zxvf httpd-2.2.4.tar.bz2cd httpd-2.2.4 ./configure --prefix=/usr/local/apache --sysconfdi ...
- iOS 开发者必不可少的 75 个工具,你都会了吗
如果你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完成不同的任务. 软件开发同样如此.你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发者精于使用工具.对你目前所使用的工具不断 ...
- 小结JS中的OOP（上）
前言:大家都知道,OOP有三大特性:封装,继承,多态.下面是自己对这三个特性的理解: 封装:把属性与方法整合到某种数据类型中.目的是让类的使用者按类的编写者的意愿去使用类.在封装过程中会一般会做两件事 ...
- CH340在STM32实现一键下载电路
在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB初期原理图部分,对采用CH340G设计的一键下载电路不 ...
- Real Boxing 2
http://itunes.apple.com/ca/app/real-boxing-2/id932779605?mt=8&ign-mpt=uo%3D4
- Python 中的 is 和 id
(ob1 is ob2) 等价于 (id(ob1) == id(ob2)) 首先id函数可以获得对象的内存地址,如果两个对象的内存地址是一样的,那么这两个对象肯定是一个对象.和is是等价的.Pytho ...