实用技巧：js格式化日期输出

在JavaWEB应用中，通过 Ajax查询返回的日期类似如下 "2010-08-01 18:22:00.0"，怎样按照希望的结果显示，往往要费一番周折，这里提供两个方法解决这个问题，仅供参考。其中格式化方法还不够完善，但已能满足大多数需要。

一、效果图

 

二、原代码

1、解析方法

            /**
             * 将字符串格式的时间输出为标准Date对象
             * @param stringDate 格式如：var stringDate="2010-08-01 18:22:00.0";
             */
            var parseDate=function(stringDate){
                var s=stringDate.substr(0, stringDate.lastIndexOf("."));
                var ss=s.split(" ");
                var tms=ss[1];
                var sss=ss[0].split("-");
                var y=sss[0];
                var m=sss[1];
                var d=sss[2];
                var MM="Jan";
                if(m=="01"){
                    MM="Jan";
                }
                if(m=="02"){
                    MM="Feb";
                }
                if(m=="03"){
                    MM="Mar";
                }
                if(m=="04"){
                    MM="Apr";
                }
                if(m=="05"){
                    MM="May";
                }
                if(m=="06"){
                    MM="Jun";
                }
                if(m=="07"){
                    MM="Jul";
                }
                if(m=="08"){
                    MM="Aug";
                }
                if(m=="09"){
                    MM="Sep";
                }
                if(m=="10"){
                    MM="Oct";
                }
                if(m=="11"){
                    MM="Nov";
                }
                if(m=="12"){
                    MM="Dec";
                }
                var dt=new Date(MM+" "+d+", "+y+" "+tms);
                return dt;
            }

2、格式化方法

            /**
             *默认输出"9月1日"格式
             *@param date Date对象
             *@param format  允许值：yyyy年MM月dd日 tt时mm分ss秒 星期 或其中部分
             **/

            var formatDate=function(date,format){

                function today(day){
                    switch(day){
                        case 0:
                            day = "星期日";
                            break;
                        case 1:
                            day = "星期一";
                            break;
                        case 2:
                            day = "星期二";
                            break;
                        case 3:
                            day = "星期三";
                            break;
                        case 4:
                            day = "星期四";
                            break;
                        case 5:
                            day = "星期五";
                            break;
                        case 6:
                            day = "星期六";
                            break;
                        default:
                            day = "error";
                    }
                    return day;
                }

                var yLen=0;
                for(var i=0;i<format.length;i++){
                    if(format.charAt(i)=="y")yLen++;
                }

                var M=true;//月
                var d=true;//日
                var t=false;//时
                var m=false;//分
                var s=false;//秒
                var D=false;//星期

                if(format.match("MM")){
                    M=true;
                }else{
                    M=false;
                }
                if(format.match("dd")){
                    d=true;
                }else{
                    d=false;
                }
                if(format.match("tt")){
                    t=true;
                }else{
                    t=false;
                }
                if(format.match("mm")){
                    m=true;
                }else{
                    m=false;
                }
                if(format.match("ss")){
                    s=true;
                }else{
                    s=false;
                }
                if(format.match("星期")){
                    D=true;
                }else{
                    D=false;
                }

                var ymd="";
                var tms="";
                var day="";
                var sp0="";
                var sp1="";

                var str="";
                if(yLen==4){
                    ymd=ymd+date.getFullYear()+"年";
                }
                if(yLen==2){
                    var year=new String(date.getFullYear());
                    var ss=year.substr(2, 2);
                    ymd=ymd+ss+"年";
                }
                if(M){
                    ymd=ymd+(date.getMonth()+1)+"月";
                }
                if(d){
                    ymd=ymd+date.getDate()+"日";
                }
                if(t){
                    tms=tms+date.getHours()+"时";
                }
                if(m){
                    tms=tms+date.getMinutes()+"分";
                }
                if(s){
                    tms=tms+date.getSeconds()+"秒";
                }
                if(D){
                    day=today(date.getDay());
                }

                if(ymd!="")sp0=" ";
                if(tms!="")sp1=" ";
                str=ymd+sp0+tms+sp1+day;
                return str;
            }

 

3、调用

            function d(){
                //允许值：yyyy年MM月dd日 tt时mm分ss秒 星期 或其中部分

                var stringDate="2010-08-01 18:22:00.0";
                var t=parseDate(stringDate);

                document.getElementById("t0").innerHTML=formatDate(t, "yyyy年MM月dd日 tt时mm分ss秒 星期");
                document.getElementById("t1").innerHTML=formatDate(t, "yyyy年MM月dd日 tt时mm分ss秒");
                document.getElementById("t2").innerHTML=formatDate(t, "yyyy年MM月dd日 tt时mm分");
                document.getElementById("t3").innerHTML=formatDate(t, "yyyy年MM月dd日 tt时");
                document.getElementById("t4").innerHTML=formatDate(t, "yyyy年MM月dd日");
                document.getElementById("t5").innerHTML=formatDate(t, "yyyy年MM月");
                document.getElementById("t6").innerHTML=formatDate(t, "yy年MM月");
                document.getElementById("t7").innerHTML=formatDate(t, "yy年");
                document.getElementById("t8").innerHTML=formatDate(t, "MM月");
                document.getElementById("t9").innerHTML=formatDate(t, "dd日");
                document.getElementById("t10").innerHTML=formatDate(t, "tt时");
                document.getElementById("t11").innerHTML=formatDate(t, "mm分");
                document.getElementById("t12").innerHTML=formatDate(t, "ss秒");
                document.getElementById("t13").innerHTML=formatDate(t, "星期");
            }

4、html代码

<body οnlοad="d()" >
        <h3>格式化日期 "2010-08-01 18:22:00.0"</h3>
        <table border="1" width="680px">
            <thead>
                <tr align="center" >
                    <th>格式化字符串</th>
                    <th>输出结果</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>yyyy年MM月dd日 tt时mm分ss秒 星期</td>
                    <td id="t0"></td>
                </tr>
                <tr>
                    <td>yyyy年MM月dd日 tt时mm分ss秒</td>
                    <td id="t1"></td>
                </tr>
                <tr>
                    <td>yyyy年MM月dd日 tt时mm分</td>
                    <td id="t2"></td>
                </tr>
                <tr>
                    <td>yyyy年MM月dd日 tt时</td>
                    <td id="t3"></td>
                </tr>
                <tr>
                    <td>yyyy年MM月dd日</td>
                    <td id="t4"></td>
                </tr>
                <tr>
                    <td>yyyy年MM月</td>
                    <td id="t5"></td>
                </tr>
                <tr>
                    <td>yy年MM月</td>
                    <td id="t6"></td>
                </tr>
                <tr>
                    <td>yy年</td>
                    <td id="t7"></td>
                </tr>
                <tr>
                    <td>MM月</td>
                    <td id="t8"></td>
                </tr>
                <tr>
                    <td>dd日</td>
                    <td id="t9"></td>
                </tr>
                <tr>
                    <td>tt时</td>
                    <td id="t10"></td>
                </tr>
                <tr>
                    <td>mm分</td>
                    <td id="t11"></td>
                </tr>
                <tr>
                    <td>ss秒</td>
                    <td id="t12"></td>
                </tr>
                <tr>
                    <td>星期</td>
                    <td id="t13"></td>
                </tr>
            </tbody>
        </table>
    </body>