recherche

Maison >interface Web >js tutoriel >Partager un article lien plug-in-date jQuery

Partager un article lien plug-in-date jQuery

零下一度
零下一度original
2017-06-19 10:50:061219parcourir
/*
 * 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partagez des exemples de plug-ins jQueryArticle suivant：Partagez des exemples de plug-ins jQuery

Articles Liés

Voir plus