HTML手動內置日期選擇器

-1

我想用下面的代碼構建一個HTML日期選擇器，我沒有使用jquery，因爲我正在讀取經典asp頁面的返回值。HTML手動內置日期選擇器

<%@ 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」跨度的問題。

可能是什麼問題？

來源

2015-10-11 Thair Abdalla

你的用戶使用什麼瀏覽器？你不能使用'HTML 5'日期選擇器，這會爲你節省很多時間。 –

它是如何體現的？會發生什麼，預計會發生什麼？ – hoijui

我認爲其中一個問題是沒有多少瀏覽器支持HTML 3.2。而且，即使在HTML 3.2中，多個ID也是一個錯誤。那麼'language'屬性是什麼？ –

我不太確定，因爲我沒有設備來運行用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現在已經過時了。最好在.NET和C＃中使用ASPX。它也可能是一個好主意，檢查您的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屬性更改爲一個類屬性。完成之後，您可以訪問像這樣的元素。

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

希望這會有所幫助。

來源

2015-10-11 13:20:05 PieterVK

你好，我的代碼在IE上工作正常，爲什麼它不工作叉鉻？ –

這可能是因爲IE並不關心Web標準。實際上，有很多網頁是爲IE開發的，並且不適用於其他瀏覽器。你使用的發電機也很舊。我會考慮升級到更新版本的visual studio。如果您註冊，視覺工作室的快遞版本是免費的。 – PieterVK

HTML手動內置日期選擇器

回答

相關問題