自制vbscript日历

<!--
自制 vbscript 日歷
可以點擊頂端的“年”，“月”以及
 “ <<” “>> ”進行日期選取 “
-->
<html>
<head> 
<style>
.Weekend{color:red; font-family:Verdana,Arial,Helvetica,sans-serif; text-align:center; cursor:hand; border-left:solid 1px #c0c0c0; border-right:solid 1px #c0c0c0; border-top:solid 1px #c0c0c0; border-bottom:solid 1px #c0c0c0;}
.Today{background-color:#cccccc; color:#006666; font-family:Verdana,Arial,Helvetica,sans-serif; font-weight:bold; text-align:center; cursor:hand; border-right:solid 1px #c0c0c0; border-top:solid 1px #c0c0c0; border-bottom:solid 1px #c0c0c0;}
.Day{color:#006666; font-family:Verdana,Arial,Helvetica,sans-serif; text-align:center; cursor:hand; border-left:solid 1px #c0c0c0; border-right:solid 1px #c0c0c0; border-top:solid 1px #c0c0c0; border-bottom:solid 1px #c0c0c0;}
.Date{text-align:center; color:#006666; font-family:Verdana,Arial,Helvetica,sans-serif; background-color:#cccccc; border-left:solid 1px #c0c0c0; border-right:solid 1px #c0c0c0; border-top:solid 1px #c0c0c0; border-bottom:solid 1px #c0c0c0;}
.OtherMonth{text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif; border-left:solid 1px #c0c0c0; border-right:solid 1px #c0c0c0; border-top:solid 1px #c0c0c0; border-bottom:solid 1px #c0c0c0;}

.YearMonth{font-weight:normal; color:#006666; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}
.YearMonthOver{font-weight:normal; color:#000000; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}

.Month{font-weight:normal; height:30px; text-align:center; color:#006666; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}
.MonthOver{font-weight:normal; height:30px; text-align:center; color:#000000; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}

.Year{font-weight:normal; height:20px; text-align:center; color:#006666; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}
.YearOver{font-weight:normal; height:20px; text-align:center; color:#000000; cursor:hand; font-family: Verdana,Arial,Helvetica,sans-serif;}

.PrevNext{cursor:hand; color:#006666;}
.PrevNextOver{cursor:hand; color:#000000; font-weight:bold;}

.Bottom{cursor:hand; color:#006666; font-size:10pt; text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif;}
.BottomOver{cursor:hand; color:#000000; font-size:10pt; text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<input type="text" style="font-family: Verdana, Arial, Helvetica, sans-serif;" onclick="OpenCalendar(this)">
</body>
</html>

解决方案 »

  1.   

    <script language="vbscript" type="text/vbscript">
    <!--
        document.write "<div id='divCalendar' style='background-color:#ccffff; text-align:center; position:absolute; z-index:1; width:160px; border:solid 1px gray; font-size:10pt; display:none;'></div>"
        dim AryCalendarDay(41)
        dim strCalendarDate, strCalendarYear, strCalendarMonth, strCalendarDay
        dim objCalendarText, divCalendarLeft, divCalendarTop
        dim AryWeekDays
        dim strCalendarType
        AryWeekDays = Array("日", "一", "二", "三", "四", "五", "六")
        strCalendarType = "D"
        
        function CreateCalendar()
            dim strHtml
            strHtml = ""
            strHtml = strHtml & "<table cellpadding='0' cellspacing='0' border='0' style='width:100%; border-bottom:solid 1px #cccccc; color:#006666;'><tr>"
            strHtml = strHtml & "<td class='PrevNext' language='javascript' onmouseover='this.className=""PrevNextOver""' onmouseout='this.className=""PrevNext""' style='width:15%; text-align:left;' onclick='PrevMonth()'><<</td>"
            strHtml = strHtml & "<td class='YearMonth' language='javascript' onmouseover='this.className=""YearMonthOver""' onmouseout='this.className=""YearMonth""' onclick='YearClick()'>" & strCalendarYear & "</td>"
            strHtml = strHtml & "<td style='width:15%;'>年</td>"
            strHtml = strHtml & "<td class='YearMonth' language='javascript' onmouseover='this.className=""YearMonthOver""' onmouseout='this.className=""YearMonth""' onclick='MonthClick()'>" & strCalendarMonth & "</td>"
            strHtml = strHtml & "<td style='width:15%;'>月</td>"
            strHtml = strHtml & "<td class='PrevNext' language='javascript' onmouseover='this.className=""PrevNextOver""' onmouseout='this.className=""PrevNext""' style='width:15%; text-align:right;' onclick='NextMonth()'>>></td>"
            strHtml = strHtml & "</tr></table>"
            
            strHtml = strHtml & "<div id='divCalendarContent' style='text-align:center;'></div>"
            
            strHtml = strHtml & "<table border='0' cellpadding='0' cellspacing='0'>"
            strHtml = strHtml & "<col width='60%'><col width='10%'><col width='30%'>"
            strHtml = strHtml & "<tr><td colspan='2' style='height:2px;'/></tr><tr>"
            strHtml = strHtml & "<td class='Bottom' language='javascript' onmouseover='this.className=""BottomOver""' onmouseout='this.className=""Bottom""' onclick='GetDate1()'>" & strCalendarDate & "</td>"
            strHtml = strHtml & "<td></td>"
            strHtml = strHtml & "<td class='Bottom' language='javascript' onmouseover='this.className=""BottomOver""' onmouseout='this.className=""Bottom""' onclick='Clean()'>Clean</td>"
            strHtml = strHtml & "</tr><tr><td colspan='2' style='height:2px;'/></tr></table>"
            
            document.all.divCalendar.innerHTML = strHtml
            select case strCalendarType
             case "Y"
             document.all.divCalendarContent.innerHTML = SetYear
             case "M"
             document.all.divCalendarContent.innerHTML = SetMonth
             case else
             document.all.divCalendarContent.innerHTML = SetDay
            end select
            
            divCalendar.style.left = divCalendarLeft
            divCalendar.style.top = divCalendarTop + 20
            divCalendar.style.display = ""
        end function
        
        function SetYear()
         dim strHtml, intI
         strHtml = "<table cellpadding='0' cellspacing='0' style='width:90%; font-size:10pt;'>"
         strHtml = strHtml & "<tr><td style='height:10px;'></td></tr>"
         for intI=0 to 19
         if intI mod 4 = 0 then
         strHtml = strHtml & "<tr>"
         end if
         if (cint(strCalendarYear)+intI-10) = strCalendarYear then
         strHtml = strHtml & "<td class='Year' language='javascript' onmouseover='this.className=""YearOver""' onmouseout='this.className=""Year""' onclick='SelectYear()' style='color:red;'>" & cint(strCalendarYear)+intI-10 & "</td>"
         else
         strHtml = strHtml & "<td class='Year' language='javascript' onmouseover='this.className=""YearOver""' onmouseout='this.className=""Year""' onclick='SelectYear()'>" & cint(strCalendarYear)+intI-10 & "</td>"
         end if
         if intI mod 4 = 3 then
         strHtml = strHtml & "</tr>"
         end if
         next
         strHtml = strHtml & "</table>"
         SetYear = strHtml
        end function
        
        function SetMonth()
         dim strHtml, intI
         strHtml = "<table cellpadding='0' cellspacing='0'style='width:90%; font-size:10pt;'>"
         strHtml = strHtml & "<tr><td style='height:10px;'></td></tr>"
         for intI=0 to 11
         if intI mod 4 = 0 then
         strHtml = strHtml & "<tr>"
         end if
         if right("0"&(cint(intI)+1),2) = strCalendarMonth then
         strHtml = strHtml & "<td class='Month' language='javascript' onmouseover='this.className=""MonthOver""' onmouseout='this.className=""Month""' onclick='SelectMonth()' style='color:red;'>" & right("0"&(cint(intI)+1),2) & "</td>"
         else
         strHtml = strHtml & "<td class='Month' language='javascript' onmouseover='this.className=""MonthOver""' onmouseout='this.className=""Month""' onclick='SelectMonth()'>" & right("0"&(cint(intI)+1),2) & "</td>"
         end if
         if intI mod 4 = 3 then
         strHtml = strHtml & "</tr>"
         end if
         next
         strHtml = strHtml & "</table>"
         SetMonth = strHtml
        end function
        
        function SetDay()
         dim intEndDay, intI, intEnd
         dim strHtml
            intEndDay = dateadd("m", 1, cdate(strCalendarYear & "/" & strCalendarMonth & "/01"))
            intEndDay = dateadd("d", -1, cdate(intEndDay))
            intEndDay = Day(cdate(intEndDay))
            dim intDateFirst
            intDateFirst = weekday(cdate(strCalendarYear & "/" & strCalendarMonth & "/01"),vbSunday)
            if (cint(intDateFirst)+cint(intEndDay)) > 36 then
             intEnd = 41
            else
             intEnd = 34
            end if
            for intI=0 to intEnd
    if intI < intDateFirst - 1 then
    AryCalendarDay(intI) = 0
    elseif intI >= intEndDay + intDateFirst - 1 then
    AryCalendarDay(intI) = 0
    else
    AryCalendarDay(intI) = intI - intDateFirst + 2
    end if
    next
    strHtml = strHtml & "<table border='0' style='width:160px; font-size:10pt;' cellpadding='0' cellspacing='0'>"
    strHtml = strHtml & "<col width='15%'><col width='14%'><col width='14%'><col width='14%'><col width='14%'><col width='14%'><col width='15%'>"
            strHtml = strHtml & "<tr>"
            for intI=0 to 6
             strHtml = strHtml & "<td class='Date'>" & AryWeekDays(intI) & "</td>"
            next
            strHtml = strHtml & "</tr>"
            for intI=0 to intEnd
             if intI mod 7 = 0 then
             strHtml = strHtml & "<tr>"
             end if
             if AryCalendarDay(intI) <> "0" then
             if right("0"&AryCalendarDay(intI),2) = strCalendarDay then
             strHtml = strHtml & "<td class='Today' onclick='GetDate()'>" & AryCalendarDay(intI) & "</td>"
             elseif intI mod 7 = 0 or intI mod 7 = 6 then
             strHtml = strHtml & "<td class='Weekend' onclick='GetDate()'>" & AryCalendarDay(intI) & "</td>"
             else
             strHtml = strHtml & "<td class='Day' onclick='GetDate()'>" & AryCalendarDay(intI) & "</td>"
             end if
            else
             strHtml = strHtml & "<td class='OtherMonth'>&nbsp;</td>"
            end if
             if intI mod 7 = 6 then
             strHtml = strHtml & "</tr>"
             end if
            next
            strHtml = strHtml & "</table>"
            SetDay = strHtml
        end function
      

  2.   

        
        function GetDate()
         strCalendarDay = window.event.srcElement.innerText
         strCalendarDate = strCalendarYear & "/" & right("0"&strCalendarMonth, 2) & "/" & right("0"&strCalendarDay, 2)
         objCalendarText.value = strCalendarDate
         divCalendar.style.display = "none"
        end function
        
        function GetDate1()
         strCalendarDate = strCalendarYear & "/" & right("0"&strCalendarMonth, 2) & "/" & right("0"&strCalendarDay, 2)
         objCalendarText.value = strCalendarDate
         divCalendar.style.display = "none"
        end function
        
        function OpenCalendar(objThis)
         set objCalendarText = objThis
         divCalendarLeft = objCalendarText.offsetLeft
         divCalendarTop = objCalendarText.offsetTop
         while not objCalendarText.offsetParent is nothing
         set objCalendarText = objCalendarText.offsetParent
         divCalendarLeft = divCalendarLeft + objCalendarText.offsetLeft
         divCalendarTop = divCalendarTop + objCalendarText.offsetTop
         wend
         set objCalendarText = objThis
         if isDate(objCalendarText.value) then
         strCalendarDate = Year(cdate(objCalendarText.value)) & "/" & right("0"&Month(cdate(objCalendarText.value)),2) & "/" & right("0"&Day(cdate(objCalendarText.value)),2)
         else
         strCalendarDate = Year(Now) & "/" & right("0"&Month(Now),2) & "/" & right("0"&Day(Now),2)
         end if
         strCalendarYear = Year(strCalendarDate)
         strCalendarMonth = right("0" & Month(strCalendarDate), 2)
         strCalendarDay = right("0" & Day(strCalendarDate), 2)
         call SetValue()
        end function
        
        function SetValue()
         while not isDate(strCalendarDate)
         strCalendarDay = cint(strCalendarDay) - 1
         strCalendarDate = strCalendarYear & "/" & right("0"&strCalendarMonth, 2) & "/" & right("0"&strCalendarDay, 2)
         wend
         strCalendarYear = Year(strCalendarDate)
         strCalendarMonth = right("0" & Month(strCalendarDate), 2)
         strCalendarDay = right("0" & Day(strCalendarDate), 2)
         call CreateCalendar()
        end function
        
        function YearClick()
         strCalendarType = "Y"
         call SetValue()
        end function
        
        function MonthClick()
         strCalendarType = "M"
         call SetValue()
        end function
        
        function SelectMonth()
         strCalendarMonth = window.event.srcElement.innerText
         strCalendarType = "D"
         strCalendarDate = strCalendarYear & "/" & right("0"&strCalendarMonth, 2) & "/" & right("0"&strCalendarDay, 2)
         call SetValue()
        end function
        
        function SelectYear()
         strCalendarYear = window.event.srcElement.innerText
         strCalendarType = "D"
         strCalendarDate = strCalendarYear & "/" & right("0"&strCalendarMonth, 2) & "/" & right("0"&strCalendarDay, 2)
         call SetValue()
        end function
        
        function PrevMonth()
         strCalendarDate = dateadd("m", -1, cdate(strCalendarDate))
         strCalendarType = "D"
         call SetValue()
        end function
        
        function NextMonth()
         strCalendarDate = dateadd("m", 1, cdate(strCalendarDate))
         strCalendarType = "D"
         call SetValue()
        end function
        
        function Clean()
         objCalendarText.value = ""
         divCalendar.style.display = "none"
        end function
    -->
    </script>
      

  3.   

    JS实现日历控件
    http://www.80nt.com/article/JavaScript/123.htm
      

  4.   

    vbscript不是很好,,,有些浏览器不支持,,,
    不过javascript就差不多所有浏览器都支持
      

  5.   

    vbscript不是很好,,,有些浏览器不支持,,,
    不过javascript就差不多所有浏览器都支持
      

  6.   

    vbscript不是很好,,,有些浏览器不支持,,,
    不过javascript就差不多所有浏览器都支持