擴充日期外掛程式

標籤：

1、請擴充日期外掛程式（/date/js/jq.date.js）,使其在select後面自動加上“年”、 “月”、“日”;並添加一個參數（lang）控制語言選擇；當lang為“chs”時1效果，當lang為“eng”2效果；

圖 1

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉日期外掛程式</title>
</head>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="js/jq.date.js"></script>
<script type="text/javascript">
$(function(){
    $("#demo").jqDate();
})
</script>
</head>

<body>
<h1 align="center">DEMO</h1>
<p align="center"><input name="date" id="demo" type="text" value="" /></p>
</body>
</html>

jq.date.js

/********下拉框式的日期選取器******/
(function($){
$.fn.extend({
        jqDate:function(opt,callback){
            /*函數地區*/
            var getNowYear = function(){
                //得到現在的年
                var date = new Date();
                return date.getFullYear();
            }
            var getNowMonth = function(){
                //得到現在的月
                var date = new Date();
                return date.getMonth()+1;
            }
            var getNowDay = function(){
                //得到現在的日
                var date = new Date();
                return date.getDate();
            }
            /*判斷是否閏年*/
            var isLeapYear = function(year)
        　　{
        　　return (0==year%4&&((year%100!=0)||(year%400==0)));
        　　}
            /*END*/
            
            /*參數定義*/
            defaults = {
                yearBegin: 1960            //開始年(預設為:1960年)
                ,yearEnd: getNowYear()    //結束年(預設為:當前年)
                ,yearEnabled:true        //年選擇框是否啟用(預設為:啟用)
                ,monthEnabled:true        //月選擇框是否啟用(預設為:啟用)
                ,dayEnabled:true        //日選擇框是否啟用(預設為:啟用)
            }
            $.extend(defaults, opt);
            //可遍曆添加多個
            $(this).each(function(){
                var _this=this;
                var el=$(this);
                el.hide();//隱藏原有的輸入框
                var elval=el.val();
                var elDate = new Date(elval.split("-").join("/"));
                var oldYear = elDate.getFullYear();//取得輸入框裡的年值
                var oldMonth=elDate.getMonth()+1;//取得輸入框裡的月值(月初始是從0開始)
                var oldDay=elDate.getDate();//取得輸入框裡的日值
                var daysInMonth =new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);//每一個月份相應的天數
                if (isNaN(oldYear))oldYear=getNowYear();
                if (isNaN(oldMonth))oldMonth=getNowMonth();
                if (isNaN(oldDay))oldDay=getNowDay();
                /*建立年下拉框*/
                var selectYear=document.createElement("select");
                selectYear.id=_this.id+"_selectYear";
                selectYear.disabled=defaults.yearEnabled?false:true;
                for (var i=defaults.yearEnd;i>=defaults.yearBegin;i--)
                {
                    var option = document.createElement("option");
                    option.value = i;
                    option.innerHTML = i;
                    //如果等於當前年就選中
                    if (!isNaN(oldYear)) {
                        if (i == oldYear) {
                            option.selected = true;
                        }
                    }
                    selectYear.appendChild(option);
                    option = null;
                }
                //加入控制項到文字框的位置
                el.after(selectYear);

                /*END*/

                /*建立月下拉框*/
                var selectMonth=document.createElement("select");
                selectMonth.id=_this.id+"_selectMonth";
                selectMonth.disabled=defaults.monthEnabled?false:true;
                for (var i=1;i<=12;i++)
                {
                    var option = document.createElement("option");
                    option.value = i;
                    option.innerHTML = i;
                    //如果等於當前年就選中
                    if (!isNaN(oldMonth)) {
                        if (i == oldMonth) {
                            option.selected = true;
                        }
                    }
                    selectMonth.appendChild(option);
                    option = null;
                }
                //加入控制項到文字框的位置
                $(selectYear).after(selectMonth);
                $(selectMonth).before(" ");
                /*END*/

                /*建立日下拉框*/
                var selectDay=document.createElement("select");
                selectDay.id=_this.id+"_selectDay";
                selectDay.disabled=defaults.dayEnabled?false:true;
                var dayCount=daysInMonth[$(selectMonth).val()-1];//天數
                if (oldMonth==2 && isLeapYear($(selectYear).val()))dayCount++;
                $(selectDay).CreateDay(dayCount,oldDay);
                //加入控制項到文字框的位置
                $(selectMonth).after(selectDay);
                $(selectDay).before(" ");
                /*END*/

                /*綁定下拉框事件*/
                //年下拉框值改變時
                $(selectYear).change(function(){
                    var thisYear=this.value;//選中的年
                    var dayCount=daysInMonth[$(selectMonth).val()-1];//天數
                    if (oldMonth==2 && isLeapYear($(selectYear).val()))dayCount++;
                    $(selectDay).CreateDay(dayCount,oldDay);
                    return updateValue();
                });
                //月下拉框值改變時
                $(selectMonth).change(function(){
                    var selectyear=$(selectYear).val();//選中的年
                    var dayCount=daysInMonth[$(selectMonth).val()-1];//天數
                    if (this.value==2 && isLeapYear(selectyear))dayCount++;
                    $(selectDay).CreateDay(dayCount,oldDay);
                    return updateValue();
                });
                //日下拉框值改變時
                $(selectDay).change(function(){
                    return updateValue();
                });
                /*END*/
                /*即時更新輸入框的值*/
                var updateValue=function(){
                    el.val($(selectYear).val()+"-"+$(selectMonth).val()+"-"+$(selectDay).val());
                };
                /*END*/
            });
            return this;
        },
        //產生日期下拉框
        CreateDay:function(dayCount,oldDay){
                var me=this.get(0);
                $(this).empty();
                for (var i=1;i<=dayCount;i++)
                {
                    var option = document.createElement("option");
                    option.value = i;
                    option.innerHTML = i;
                    //如果等於當前年就選中
                    if (!isNaN(oldDay)) {
                        if (i == oldDay) {
                            option.selected = true;
                        }
                    }
                    me.appendChild(option);
                    option = null;
                }
        }
})
})(jQuery);

 

 

圖 2

<!doctype html>
<html>
<head lang="chs">
<meta charset="utf-8">
<title>下拉日期外掛程式</title>
</head>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="js/jq.date.js" language="eng" id="dateJs"></script>
<script type="text/javascript">
$(function(){
    $("#demo").jqDate();
    if ($("#dateJs").attr("language") == "eng") {
        $("#Years").text("Year");
        $("#Months").text("Month");
        $("#Days").text("Day");
    }
    else if ($("#dateJs").attr("language") == "chs") {
        ("#Years").text("年");
        $("#Months").text("月");
        $("#Days").text("日");
    };
})
</script>
</head>

<body>
<h1 align="center">日期</h1>
<p align="center"><input name="date" id="demo" type="text" value="" /></p>
</body>
</html>

擴充日期外掛程式