jQuery日期联动插件
广告
/* * jQuery Date Selector Plugin * 日期联动选择插件 * * Demo: $("#calendar").DateSelector({ ctlYearId: <年控件id>, ctlMonthId: <月控件id>, ctlDayId: <日控件id>, defYear: <默认年>, defMonth: <默认月>, defDay: <默认日>, minYear: <最小年|默认为1882年>, maxYear: <最大年|默认为本年> }); HTML:<div id="calendar"><SELECT id=idYear></SELECT>年 <SELECT id=idMonth></SELECT>月 <SELECT id=idDay></SELECT>日</div> */(function ($) { //SELECT控件设置函数 function setSelectControl(oSelect, iStart, iLength, iIndex) { oSelect.empty(); for (var i = 0; i < iLength; i++) { if ((parseInt(iStart) + i) == iIndex) oSelect.append("<option selected='selected' value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>"); else oSelect.append("<option value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>"); } } $.fn.DateSelector = function (options) { options = options || {}; //初始化 this._options = { ctlYearId: null, ctlMonthId: null, ctlDayId: null, defYear: 0, defMonth: 0, defDay: 0, minYear: 1882, maxYear: new Date().getFullYear() } for (var property in options) { this._options[property] = options[property]; } this.yearValueId = $("#" + this._options.ctlYearId); this.monthValueId = $("#" + this._options.ctlMonthId); this.dayValueId = $("#" + this._options.ctlDayId); var dt = new Date(), iMonth = parseInt(this.monthValueId.attr("data") || this._options.defMonth), iDay = parseInt(this.dayValueId.attr("data") || this._options.defDay), iMinYear = parseInt(this._options.minYear), iMaxYear = parseInt(this._options.maxYear); this.Year = parseInt(this.yearValueId.attr("data") || this._options.defYear) || dt.getFullYear(); this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1; this.Day = iDay > 0 ? iDay : dt.getDate(); this.minYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year; this.maxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year; //初始化控件 //设置年 setSelectControl(this.yearValueId, this.minYear, this.maxYear - this.minYear + 1, this.Year); //设置月 setSelectControl(this.monthValueId, 1, 12, this.Month); //设置日 var daysInMonth = new Date(this.Year, this.Month, 0).getDate(); //获取指定年月的当月天数[new Date(year, month, 0).getDate()] if (this.Day > daysInMonth) { this.Day = daysInMonth; }; setSelectControl(this.dayValueId, 1, daysInMonth, this.Day); var oThis = this; //绑定控件事件 this.yearValueId.change(function () { oThis.Year = $(this).val(); setSelectControl(oThis.monthValueId, 1, 12, oThis.Month); oThis.monthValueId.change(); }); this.monthValueId.change(function () { oThis.Month = $(this).val(); var daysInMonth = new Date(oThis.Year, oThis.Month, 0).getDate(); if (oThis.Day > daysInMonth) { oThis.Day = daysInMonth; }; setSelectControl(oThis.dayValueId, 1, daysInMonth, oThis.Day); }); this.dayValueId.change(function () { oThis.Day = $(this).val(); }); }})(jQuery);
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><style>body{padding:20px;background:#ddd;font:14px/1.7 Arial,"5b8b4f53";}h1,h2,h3{font:bold 36px/1 "5fae8f6f96c59ed1";}h2{font-size:20px;}h3{font-size:16px;}fieldset{margin:1em 0;}fieldset legend{font:bold 14px/2 "5fae8f6f96c59ed1";}a{color:#06f;text-decoration:none;}a:hover{color:#00f;} .wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}</style></head><body><div class="wrap"> <h1>jQuery 多级联动下拉菜单</h1> <h2>示例</h2> <div id="dateSelector"> <select id="idYear" name="idYear" data=""></select>年 <select id="idMonth" name="idMonth" data="12"></select>月 <select id="idDay" name="idDay" data="1"></select>日 </div> </div> <script src="js/jquery-1.4.4.min.js"></script><script src="js/jquery.calendar.js"></script><script>$(document).ready(function () { var myDate = new Date(); $("#dateSelector").DateSelector({ ctlYearId: 'idYear', ctlMonthId: 'idMonth', ctlDayId: 'idDay', defYear: myDate.getFullYear(), defMonth: (myDate.getMonth()+1), defDay: myDate.getDate(), minYear: 1800, maxYear: (myDate.getFullYear()+1) });});</script></body></html>
演示
一起学吧部分文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与一起学吧进行文章共享合作。
广告
广告
最新JavaScript
广告
