现在的位置: 首页 > 综合 > 正文

一个仿苹果风格的漂亮html日历

2013年12月26日 ⁄ 综合 ⁄ 共 4592字 ⁄ 字号 评论关闭
无意找到个js日历,蛮漂亮的,有点苹果的感觉,下面是个示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>calendar示例</title>
    <script type="text/javascript" src="./calendar/calendar_base.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="./calendar/theme.css" />
</head>

<script type="text/javascript">
        /**
         * 得到当前时间    yyyy-MM-dd HH:mm:ss 格式
         */
        function getCurrentTime()
        {
            var dateObj = new Date();
            var yearStr = dateObj.getYear();
            var monthStr = ( dateObj.getMonth() + 1 ) < 10? "0" + ( dateObj.getMonth() + 1 ) : ( dateObj.getMonth() + 1 );
            var dayStr = dateObj.getDate() < 10? "0" + dateObj.getDate() : dateObj.getDate();
            var dateStr = ( yearStr + "-" + monthStr + "-" + dayStr );    //最终日期字符串  yyyy-MM-dd
           
            var hourStr = dateObj.getHours() < 10? "0" + dateObj.getHours() : dateObj.getHours();
            var minuteStr = dateObj.getMinutes() < 10? "0" + dateObj.getMinutes() : dateObj.getMinutes();
            var secondStr = dateObj.getSeconds() < 10? "0" + dateObj.getSeconds() : dateObj.getSeconds();
            var timeStr = hourStr + ":" + minuteStr + ":" + secondStr;    //最终时间字符串  HH:mm:ss
           
            return dateStr + " " + timeStr;
        }

        /**
         * 填入当前时间值。有值,清除。无值,填入当前时间。
         */
        function setValueForTime( who, len )
        {
            who.value = who.value == ""? getCurrentTime().substring( 0, len ) : "";
        }

        /**
         * 模拟java的StringBuffer类,处理多字符串相加
         */
        function StringBuffer()
        {
            this.str = new Array();   
           
            this.append = function( s )
            {
                this.str.push( s );   
                return this;
            }
           
            this.toString = function()
            {
                return this.str.join( "" );
            }
        }
        /**
        * 检查日期yyyy-MM-dd格式
        */
        function checkDate(inputdate)
        {
            var input_date = inputdate.split('-').join( "" );
            if(input_date.length != 8 && input_date != "")
            {
                alert('Date format error');
                return false;
            }
            if(isNaN(input_date))
            {
                alert('Date must be number');
                return false;
            }
            var yy1=input_date.substr(0,4);
            var mm1=input_date.substr(4,2);
            var dd1=input_date.substr(6,2);
            if (!((mm1>=1) && (mm1<=12))) {
               alert("Month must between 1~12");
               return false;
            }
            if (mm1==1 || mm1==3 || mm1==5 || mm1==7 || mm1==8 || mm1==10 || mm1==12) {
                if (!(dd1>=1 && dd1<=31)) {
                        alert("Date must between 01~31");
                        return false;
                }
            }
            if (mm1==2 || mm1==4 || mm1==6 || mm1==9 || mm1==11) {
                if (mm1==2) {
                    if ((yy1 % 4 ==0 && yy1 % 100 !=0) || yy1 % 400==0) {
                        if (!(dd1>=1 && dd1<=29)) {
                            alert("Feb of leap-year should between 1~29");
                            return false;
                        }
                    } else {
                        if (!(dd1>=1 && dd1<=28)) {
                            alert("Feb of unleap-year should between 1~28");
                            return false;
                        }
                    }
                } else {
                    if (!(dd1>=1 && dd1<=30)) {
                        alert("Date must between 1~30");
                        return false;
                    }
                }
            }
            return true;
        }
        /**
        *  起始日期不能晚于结束日期,验证yyyy-MM-dd格式
        */   
        function checkStartAndEnd(start_Date,end_Date)
        {
            var startDate = start_Date.split('-').join( "" );
            var endDate = end_Date.split('-').join( "" );
            var yyStart=startDate.substr(0,4);
            var mmStart=startDate.substr(4,2);
            var ddStart=startDate.substr(6,2);
            var yyEnd=endDate.substr(0,4);
            var mmEnd=endDate.substr(4,2);
            var ddEnd=endDate.substr(6,2);
            if(yyStart>yyEnd)
            {
                return false;
            }else if(yyStart == yyEnd)
            {
                if(mmStart>mmEnd)
                {
                    return false;
                }else if(mmStart == mmEnd)
                {
                    if(ddStart>ddEnd)
                    {
                        return false;
                    }
                }
                return true;
            }
            return true;
        }
</script>

<body topmargin="0" leftmargin="0" >
    <form>   
        <input type="text" id="usingTime1" class="txt3" onclick="setValueForTime( this, 16 );"/><!--必须-->
        <img src="imgs/cal.gif" style="border:0px;cursor:pointer;" onclick="return showCalendar('usingTime1', '%Y-%m-%d %H:%M', '24', true);" title="选择日期"/>
        ~
        <input type="text" id="usingTime2" class="txt3" onclick="setValueForTime( this, 16 );"/><!--必须-->
        <img src="imgs/cal.gif" style="border:0px;cursor:pointer;" onclick="return showCalendar('usingTime2', '%Y-%m-%d %H:%M', '24', true);" title="选择日期"/>
    </form>   
</body>
</html>

html和日历js在资源里面(我上传了,可是我在我的资源里面却看不见,为什么,问CSDN)

【上篇】
【下篇】

抱歉!评论已关闭.