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

JavaScript08

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内容过多，无法在这发出来

<!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>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="sign.css"/>

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

<script type="text/javascript">

$(function(){

//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]

calUtil.init(signList)

})

</script>

</head>

<body>

<div style="width:300pxheight:300px" id="calendar"></div>

</body>