js如何做到点击文本框弹出日历？

JavaScript014

js如何做到点击文本框弹出日历？,第1张

demo.htm // demo实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head><title>

无标题页

</title>

<script type="text/javascript" src="Calendar.js"></script>

</head>

<body>

<form name="form1" method="post" action="Default3.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTcyMDUyOTIyZGRKyTJtRcvRJ0v4IJi40MBOayccLg==" />

</div>

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

</div>

<div>

<table border="0px" style="margin:0padding:0height:22pxpadding:0" cellpadding="0" cellspacing="0" name="Calendar1" OnInitialzation="__doPostBack('Calendar1','')"><tr><td id="calendar_td" style="border-right:0"><input id="show_Calendar1" type="text" style="margin:0padding:0height:18pxwidth:130px" value="2011-01-13" onkeydown="SelectText(event,'show_Calendar1')CanNotDelete(event)" onchange="OnTextChange('show_Calendar1','1')" /></td><td style="border-left:0"><img src="img/ico.gif" style="height:18px" onclick="Initiailzation('show_Calendar1','1')" /></td><td style="border-right:0"><div id="showError_Calendar1" style="height:18pxfont-size:12pxcolor:#FF0000padding-top:8px"></div></td><td colspan="3"><div id="calendar_Calendar1"></div></td></tr></table>

</div>

<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1']

if (!theForm) {

theForm = document.form1

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget

theForm.__EVENTARGUMENT.value = eventArgument

theForm.submit()

}

}

//]]>

</script>

</form>

</body>

</html>

这是前段时间写的一个日历控件，封装成服务器自定义控件了，不过可以直接调用js，以上是js源码和demo实例，已经兼容ie/6/7/8，firefox，safari等主流浏览器，希望对你有帮助，如需要完整源码，请联系

附：js内容过多，无法在这发出来

1.写一个获取当前时间的脚本

2.写一个获取事件源绝对坐标的脚本

3.写一个日历生成脚本，根据年(闰年)月(大小月)周(周一到周日)生成日历

4.当事件源(一般是文本框)获得焦点的时候，触发获取绝对坐标的事件，然后生成当前月的日历，将此日历的坐标用脚本移动到文本框下方

5.生成日历的时候，给所有日添加返回事件，把当前选中的年月日反馈

6.用脚本把反馈回来的日期信息，写入事件源控件

7.网上日历控件一大堆，最好别自己写，很容易蛋疼的

<input type="text" name="date_move"

id="date_move" size="11" dojoType="dijit.form.DateTextBox">

我用的dojo插件生成的，，你可以百度下，下载个插件就好了，挺简单的。