Question

我正在尝试使用下面的代码构建HTML日期选择器，我没有使用jquery，因为我正在读取经典asp页面的返回值。

<%@ Language=VBScript %>
<% Response.Expires = 0 %>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="../css/Intranet.css">
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function window_onload() {

    mydate= new Date()
    theMonth.selectedIndex = mydate.getMonth();
    theYear.selectedIndex = mydate.getYear()-1940;
    window.returnValue = (mydate.getMonth()+1) + "/" + mydate.getDate() + "/" + mydate.getYear();
    display_calendar();
}

function navigateMonth(direction) {
    if (direction==1)
        if (theMonth.selectedIndex==11)
            {
            theMonth.selectedIndex = 0;
            theYear.selectedIndex = theYear.selectedIndex + 1;
            }
        else
            theMonth.selectedIndex = theMonth.selectedIndex + 1;
    else
        if (theMonth.selectedIndex==0)
            {
            theMonth.selectedIndex = 11;
            theYear.selectedIndex = theYear.selectedIndex - 1;
            }
        else
            theMonth.selectedIndex = theMonth.selectedIndex - 1;
    display_calendar();
}

function display_calendar() {

    for(i=0;i<42;i++) thisCell(i).innerHTML = "&nbsp;";

    d = new Date(theYear.value, theMonth.value, 1)
    d_next = new Date(theYear.value, theMonth.value, 1)
    currdate = new Number(theMonth.value)

    if (currdate == 3 && theYear.value == 2011)
    {
        d_next = new Date(2011, 4, 2);

        if (d.getDate() != 1){ 
        d.setDate(d.getDate() + 1); 
        }
        else {
        d_next.setDate(d_next.getDate() - 1);
        }
    }
    else
    {
        d_next.setMonth(currdate+1);
    }

    if (currdate==3 && theYear.value==2005)
    {
        d = new Date(theYear.value, 3, 1, 23, 59, 00)
        d_next = new Date(theYear.value, 4, 1, 23, 59, 00)
        currdate = new Number(theMonth.value)
    }

    for(i=d.getDay();i<Math.round((d_next-d)/86400000+d.getDay());i++) 
    {
        if (thisCell(i)) 
        {
            thisCell(i).innerHTML = "<p style='CURSOR:hand' onclick=selectDate('" + (currdate+1) + "/" + (i-d.getDay()+1) + "/" + theYear.value + "')>" + (i-d.getDay()+1) + "</P>";
        }
    }
}

function theYear_onchange() {
    display_calendar();
}

function theMonth_onchange() {
    display_calendar();
}

function selectDate(s) {
    //alert(s);
    //s=Date.parse(s);
    //alert(s);
    window.returnValue = s;
    window.close();
}

//-->
</SCRIPT>

<TITLE>Select Date</TITLE>
</HEAD>
<body Class ="DialogBody"  LANGUAGE=javascript onload="return window_onload()">  
<TABLE cellSpacing=1 cellPadding=1 border=1 align=center>
  <TR>
    <TD noWrap colSpan=5 align=center>
  <input onclick="navigateMonth(-1)" type="Button" Value="< " id=Button1 name=Button1><SELECT id=theYear size=1 name=theYear LANGUAGE=javascript onchange="return theYear_onchange()"> 
  <% For i =1940 to Year(Now) + 20 %> 

    <OPTION value=<%=i%> selected><%=i%></OPTION>   

  <%Next%>
  </SELECT>

 <!-- <OPTION value=1999>1999</OPTION><OPTION 
  value=2000>2000</OPTION><OPTION value=2001>2001</OPTION><OPTION 
  value=2002>2002</OPTION><OPTION value=2003>2003</OPTION><OPTION 
  value=2004>2004</OPTION><OPTION value=2005>2005</OPTION><OPTION 
  value=2006>2006</OPTION><OPTION value=2007>2007</OPTION><OPTION 
  value=2008>2008</OPTION><OPTION value=2009>2009</OPTION><OPTION 
  value=2010>2010</OPTION><OPTION value=2011>2011</OPTION><OPTION 
  value=2012>2012</OPTION>-->

  <SELECT id=theMonth size=1 name=theMonth LANGUAGE=javascript onchange="return theMonth_onchange()"> 
  <OPTION value=0 selected>January</OPTION>
  <OPTION value=1>February</OPTION>
  <OPTION value=2>March</OPTION>
  <OPTION value=3>April</OPTION>
  <OPTION value=4>May</OPTION>
  <OPTION value=5>June</OPTION>
  <OPTION value=6>July</OPTION>
  <OPTION value=7>August</OPTION>
  <OPTION value=8>September</OPTION>
  <OPTION value=9>October</OPTION>
  <OPTION value=10>November</OPTION>
  <OPTION value=11>December</OPTION></SELECT><input onclick="navigateMonth(1)" type="Button" Value=" >" id=Button1 name=Button1>
    </TD>
    <TD noWrap colSpan=2 align=center><input onclick="selectDate('')" type="Button" Value="Clear" id=Button1 name=Button1></TD>
  </TR>
  <TR>
    <TD noWrap><STRONG>&nbsp;Sun </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Mon </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Tue </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Wed </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Thu </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Fri </STRONG></TD>
    <TD noWrap><STRONG>&nbsp;Sat </STRONG></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD></TR>
  <TR>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell></SPAN></TD>
    <TD noWrap><SPAN id=thisCell LANGUAGE=javascript onclick="alert(this.sourceIndex)"></SPAN></TD></TR>
    </TABLE>

</BODY>
</HTML>

我得到了桌子的草图，但似乎“thiscell”跨度存在问题。

可能是什么问题？

Answer 1

我不太确定，因为我没有设备来运行用VBScript编写的页面，但据我所知，你已经写了这个。

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
...
function selectDate(s) {
    //alert(s);
    //s=Date.parse(s);
    //alert(s);
    window.returnValue = s;
    window.close();
}

//-->

正如您可以直接使用此网站使用的语法高亮显示，您已注释掉了完整的脚本部分。脚本开头的<!--适用于旧浏览器，使它们忽略了它们可能不支持的JavaScript。现在几乎每个浏览器都支持JavaScript，所以不再需要这样的东西了，但是有些人希望有意阻止JavaScript。

由于这种做法，W3Schools建议你写这样的javascript代码。

<script type="text/javascript">
//<![CDATA[
var i = 10;
if (i < 5) {
  // some code
}
//]]>
</script>

再次。正如您在语法高亮显示中看到的那样。现在JavaScript代码没有被注释掉。而且，ASP现在已经过时了。最好将ASPX与.NET和C＃一起使用。检查IIS服务器的设置也是一个好主意。

修改的

我仔细研究了代码

for(i=0;i<42;i++) thisCell(i).innerHTML = "&nbsp;";

d = new Date(theYear.value, theMonth.value, 1)
d_next = new Date(theYear.value, theMonth.value, 1)
currdate = new Number(theMonth.value)

你在哪里获得thisCell对象？我认为，当你使用它时，没有你没有为这个对象赋值。有几种方法可以实现这一目标。例如，如果您使用的是jQuery。

var thisCell = $("#thisCell");

或者如果您使用的是标准JavaScript

var thisCell = document.getElementById("thisCell");

后者将始终有效。对于jQuery版本，您需要先导入jQuery。

然而，函数getElementById应该只返回一个我认为的元素。 ID属性不应具有分配给多个标记的相同值。将每个id属性更改为class属性。完成后，您可以访问这样的元素。

var x = document.getElementsByClassName("thisCell");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

希望这有帮助。

HTML手动构建的datepicker

1 个答案: