search

Home >Web Front-end >JS Tutorial >Share an article jQuery plug-in-date linkage

Share an article jQuery plug-in-date linkage

零下一度
零下一度Original
2017-06-19 10:50:061203browse
/*
 * jquery Date Selector Plugin
 * 日期联动选择插件
 *
 * Demo:
        $("#calendar").DateSelector({
                ctlYearId: <年控件id>,
                ctlMonthId: <月控件id>,
                ctlDayId: <日控件id>,
                defYear: <默认年>,
                defMonth: <默认月>,
                defDay: <默认日>,
                minYear: <最小年|默认为1882年>,
                maxYear: <最大年|默认为本年>
        });

   HTML:<p id="calendar"><SELECT id=idYear></SELECT>年 <SELECT id=idMonth></SELECT>月 <SELECT id=idDay></SELECT>日</p>
 */(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=&#39;selected&#39; value=&#39;" + (parseInt(iStart) + i) + "&#39;>" + (parseInt(iStart) + i) + "</option>");            else
                oSelect.append("<option value=&#39;" + (parseInt(iStart) + i) + "&#39;>" + (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,"/5b8b/4f53";}
h1,h2,h3{font:bold 36px/1 "/5fae/8f6f/96c5/9ed1";}
h2{font-size:20px;}
h3{font-size:16px;}
fieldset{margin:1em 0;}
fieldset legend{font:bold 14px/2 "/5fae/8f6f/96c5/9ed1";}
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><p class="wrap">
    <h1>jQuery 多级联动下拉菜单</h1>
 
    <h2>示例</h2>
    <p 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>日    </p>
     </p>
 <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>

The above is the detailed content of Share an article jQuery plug-in-date linkage. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Share about jQuery plug-in examplesNext article：Share about jQuery plug-in examples

Related articles

See more