一. 效果图
二. 功能介绍
支持滚动和点击选择年月。（目前只支持设置年月的最大最小值，不支持整体的最大最小值）
三. 代码
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;
}