致力于打造中国站长娱乐学习的免费资源站!官方合作QQ:283852481

您当前的位置:首页 > 教程 > 网页设计 > JavaScript/JQuery

jQuery日期联动插件

时间:2016-11-20 15:52:23  来源:互联网  

/* * 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>

演示 来源


精彩广告