stackoom
  简体   繁体   中英

HTML manually built datepicker

 原文  2015-10-11 10:59:34  2   1    javascript/ jquery/ html/ datepicker

Question

I am trying to build an HTML datepicker using the code below, I am not using jquery because I am reading the returned value to a classic asp page.

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

i get the sketch of the table but it seems that there is a problem with the "thiscell" span.

What might be the problem?

1 answers

solution1
 0  2015-10-11 13:20:05

I am not really sure since I don't have the equipment to run a page written with VBScript, but as far as I can see you have written this.

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

//-->

As you can directly with the syntax highlighting this site uses, you have commented out your complete script section. The <!-- at the beginning of the script is meant for old browsers to make them ignore the JavaScript they may not support. Nowadays almost every browser support JavaScript so things like that aren't needed any more, but there are some people who wish to block JavaScript on purpose.

Because of this practice, W3Schools suggests to write your javascript code like this.

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

Again. As you can see at the syntax highlighting. Now the JavaScript code isn't commented out. Also, ASP is kind of outdated now. It is better to use ASPX with .NET and C#. It also may be a good idea to check the settings of your IIS server.

EDIT

I took a closer look at the code

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)

Where do you get the thisCell object? There is no you did not assign a value to this object when you used it i think. There are a few ways in which you can achieve this. For instance, if you are using jQuery.

var thisCell = $("#thisCell");

Or if you are using standard JavaScript

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

The latter will work always. For the jQuery version you need to import jQuery first.

The function getElementById however is supposed to return only one element I think. The ID attribute is not supposed to have the same value assigned to multiple tags. Change every id attribute to a class attribute. After you have done that you can access the elements like this.

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

Hope this helps.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Open datepicker manually angular Unable to manually open Jquery Datepicker Fire the datepicker onselect event manually React datepicker disable entering date manually Manually closing the p-calendar datepicker React not going to JavaScript function that is manually built How to manually trigger a built-in action in QuillJS? Manually set time on timer built with JS Javascript datepicker usage in html HTML Datepicker - Opened by default
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM