http://www.cnblogs.com/ccblogs/p/5260949.html
一. 效果圖
?
二. 功能介紹
支持滾動和點擊選擇年月。（目前只支持設置年月的最大最小值，不支持整體的最大最小值）
?
三. 代碼
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: 0;margin: 0;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: 0;left: 0;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: 9999999;
}#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: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;overflow: hidden;
}#datescroll div {float: left;margin-top: 15px;
}#yearwrapper {position: absolute;margin-left: 16%;left: 0;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;
} 
)
