堆栈内存溢出
  简体   繁体   English

HTML 手动构建的日期选择器

[英]HTML manually built datepicker

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

问题描述

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.我正在尝试使用下面的代码构建一个 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>

i get the sketch of the table but it seems that there is a problem with the "thiscell" span.我得到了表格的草图，但“thiscell”跨度似乎有问题。

What might be the problem?可能是什么问题？

1 个解决方案

解决方案1
 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.我不太确定，因为我没有设备来运行用 VBScript 编写的页面，但据我所知，你已经写了这个。

<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.脚本开头的<!--是为了让旧浏览器忽略它们可能不支持的 JavaScript。 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.现在几乎每个浏览器都支持 JavaScript，所以不再需要这样的东西，但有些人希望故意阻止 JavaScript。

Because of this practice, W3Schools suggests to write your javascript code like this.由于这种做法，W3Schools 建议像这样编写您的 javascript 代码。

<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.现在 JavaScript 代码没有被注释掉。 Also, ASP is kind of outdated now.此外，ASP 现在有点过时了。 It is better to use ASPX with .NET and C#.最好将 ASPX 与 .NET 和 C# 一起使用。 It also may be a good idea to check the settings of your IIS server.检查 IIS 服务器的设置也可能是一个好主意。

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?你从哪里得到 thisCell 对象？ 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.例如，如果您使用 jQuery。

var thisCell = $("#thisCell");

Or if you are using standard JavaScript或者如果您使用标准 JavaScript

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

The latter will work always.后者将始终有效。 For the jQuery version you need to import jQuery first.对于 jQuery 版本，您需要先导入 jQuery。

The function getElementById however is supposed to return only one element I think.但是，我认为函数 getElementById 应该只返回一个元素。 The ID attribute is not supposed to have the same value assigned to multiple tags. ID 属性不应具有分配给多个标签的相同值。 Change every id attribute to a class attribute.将每个 id 属性更改为一个类属性。 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.希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 手动打开日期选择器 - Open datepicker manually angular 无法手动打开Jquery Datepicker - Unable to manually open Jquery Datepicker 手动触发datepicker onselect事件 - Fire the datepicker onselect event manually React datepicker 禁用手动输入日期 - React datepicker disable entering date manually 手动关闭P日历日期选择器 - Manually closing the p-calendar datepicker React 不会转到手动构建的 JavaScript 函数 - React not going to JavaScript function that is manually built 如何手动触发 QuillJS 中的内置操作？ - How to manually trigger a built-in action in QuillJS? 在用 JS 构建的计时器上手动设置时间 - Manually set time on timer built with JS HTML中的Javascript日期选择器用法 - Javascript datepicker usage in html HTML Datepicker - 默认情况下已打开 - HTML Datepicker - Opened by default
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM