移动端类似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 滚动列表 ...
随机推荐
- 【转】15 个用于 GitHub 的 Chrome 插件
原文网址:http://webres.wang/15-useful-chrome-extensions-for-github/ 对于 GitHub 你了解多少呢?其实,它是一个基于 Git 托管的 W ...
- linux 安装SVN
1.环境centos6.4 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve -d -r /www/sv ...
- python numpy sum函数用法
numpy.sum numpy.sum(a, axis=None, dtype=None, out=None, keepdims=False)[source] Sum of array element ...
- jQuery基础知识--Form基础
form中的单行文本获取和失去焦点 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- 打造万能的ListView GridView 适配器
转载:http://blog.csdn.net/lmj623565791/article/details/38902805/ 通用的ViewHolder 首先分析下ViewHolder的作用,通过co ...
- 性能测试之系统监控工具nmon
一.概述 本篇文章主要讲解nmon,以下为目录 1.nmon介绍 2.nmon下载.安装及使用 3.nmon analysis 分析及使用,各个项的含义 二.详细信息: 1.nmon介绍: nmon( ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...
- django-grappelli 安装配置
在python34/scripts文件夹下pip3 install django-grappelli pip安装一般会装在python34的tools或lib之类的文件夹下,一定要找到那个文件夹,gr ...
- 《学习OpenCV》中求给定点位置公式
假设有10个三维的点,使用数组存放它们有四种常见的形式: ①一个二维数组,数组的类型是CV32FC1,有n行,3列(n×3) ②类似①,也可以用一个3行n列(3×n)的二维数组 ③④用一个n行1列(n ...
- 数往知来JavaScript_DOM<十>
一.DOM 1.onclick事件 表示点击 一般用在-->跳转 a标签,希望点击的时候不去跳转,而是做别的事情,并在里面返回一个false <a href="http:// ...