2015-10-11 3 views
-1

Я пытаюсь создать HTML datepicker, используя код ниже, я не использую jquery, потому что я читаю возвращаемое значение на классической странице asp.HTML, созданный вручную datepicker

<%@ 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> 

Я получаю эскиз таблицы, но кажется, что существует проблема с диапазоном «эта ячейка».

В чем может быть проблема?

+0

Какой браузер используют ваши пользователи? Не можете ли вы использовать датпикер 'HTML 5', это сэкономит вам много времени. –

+0

как это проявляется? что происходит, что ожидается? – hoijui

+0

Я думаю, что одна из проблем заключается в том, что не многие браузеры поддерживают HTML 3.2 больше. Кроме того, множественные идентификаторы являются ошибкой, даже в HTML 3.2. А что с атрибутом 'language'? –

ответ

0

Я не совсем уверен, так как у меня нет оборудования для запуска страницы, написанной с помощью 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.

EDIT

Я присмотрелся на код

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"; 
} 

Надеюсь, это поможет.

+0

привет, мой код отлично работает на IE, почему он не работает fork chrome? –

+0

Это возможно, потому что IE не заботится о веб-стандартах. По сути, для IE существует много веб-страниц hwo, которые не будут работать на других браузерах. Также используемый генератор довольно старый. Я бы рассмотрел обновление до более новой версии визуальной студии. Экспресс-версия визуальной студии бесплатна, если вы зарегистрируетесь. – PieterVK

Смежные вопросы