深圳成交型网站建设,手机什么app做网站,在线制作logo图标,郑州一核酸点推vip服务 年费320元http://www.cnblogs.com/ccblogs/p/5260949.html 一. 效果图 二. 功能介绍 支持滚动和点击选择年月。#xff08;目前只支持设置年月的最大最小值#xff0c;不支持整体的最大最小值#xff09; 三. 代码 1. 在你的html中添加如下代码#xff1a; 直接加载body里面…http://www.cnblogs.com/ccblogs/p/5260949.html 一. 效果图 二. 功能介绍 支持滚动和点击选择年月。目前只支持设置年月的最大最小值不支持整体的最大最小值 三. 代码 1. 在你的html中添加如下代码 直接加载body里面这里是插件渲染html的地方。 div iddatePlugin/div 2. 在你的html中添加输入框 可以是直接的一个输入框也可以是input-group样式的。 我这里使用的时input-grouphtml是由JS加载的。 div classitem item-buydate input-group
span classinput-group-span no-border-right idbuydate-span申购成交时间/span
input classtxt-input txt-buydate no-border-left text-right typetext 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 iddateshadow/div div iddatePage classpage section div iddatetitle opts.title /div div iddatemark/div div iddatescroll div idyearwrapper ul/ul /div div idmonthwrapper ul/ul /div /div /section footer iddateFooter div idsetcancle ul li iddateconfirm确定/li li iddatecancle取消/li /ul /div /footer /div$(#datePlugin).html(str);}function createYEAR_UL() {var str li classplaceholdernbsp;/li;for (var i opts.beginyear; i opts.endyear; i) {str li data-params (i - opts.beginyear 1) i 年/li;}return str li classplaceholdernbsp;/li;}function createMONTH_UL() {var str li classplaceholdernbsp;/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 classplaceholdernbsp;/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;
}
