Question

asp.net中textbox获取焦点显示日历控件

aspx中代码:
<script language="javascript" type="text/javascript">
function getAbsolutePosition(element)
{
var point = { x: element.offsetLeft, y: element.offsetTop };
if (element.offsetParent)
{
var parentPoint = this.getAbsolutePosition(element.offsetParent);
point.x += parentPoint.x;
point.y += parentPoint.y;
}
return point;
};
function myclick()
{
var myTextbox=document.getElementById("myRegisterTime");
var point1 = getAbsolutePosition(myTextbox);
document.getElementById("caDiv").style.display="block";
document.getElementById("caDiv").style.left=point1.x;
document.getElementById("caDiv").style.top=point1.y;
}
function divonclick()
{
document.getElementById("caDiv").style.display="none";
}
</script>

页面控件:

<asp:TextBox ID="myRegisterTime" runat="server" width="220px"></asp:TextBox>

<div id="caDiv" style="display:none;position: absolute;" onclick="divonclick()">
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="#3366CC" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#003399" Height="200px" Width="220px"
onselectionchanged="Calendar1_SelectionChanged" BorderWidth="1px"
CellPadding="1" DayNameFormat="Shortest">
<SelectedDayStyle BackColor="#009999" ForeColor="#CCFF99" Font-Bold="True" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF"
BorderColor="#3366CC" BorderWidth="1px" Height="25px" />
</asp:Calendar>
</div>

后台代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
myRegisterTime.Attributes.Add("onfocus", "javascript:myclick()");
}
}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
if (Calendar1.SelectedDate > DateTime.Now.AddDays(-1.0))
myRegisterTime.Text = Calendar1.SelectedDate.ToLongDateString();
else
{
// WebHelper.Alert("日期无效，请重选！");
Calendar1.SelectedDate = DateTime.Now;
}
}
按照以上代码我已实现了此功能，但是现在我把它放入引用母版页的页面就出现问题了：弹出类似这样的对话框“var point = { x: element.offsetLeft, y: element.offsetTop } 缺少对象”。
求解！
如果有其他实现方法也可以，要具体代码，求高手解救啊，如果能解决问题必定再加分！

Answer 1

var myTextbox=document.getElementById("myRegisterTime");
改为：
var myTextbox=document.getElementById("<%=myRegisterTime.ClientID%>");
导致这个问题的出现是当你引用母版页时，TEXTBOX的实际ID在客户端会发生变化

另外，像你这种需求可以使用Jquery的datepicker插件，实现起来比你这种方式简单得多，见参考资料.

Answer 2

加入母板页后，生成页面控件id就发生变化，所以你用js获取不到caDiv这个控件id。你查看下页面源文件，把caDiv换成源文件里的id就可以了。

Answer 3

楼上正解。ASP.NET生成的ID是动态的，用JS调用不一定正常。建议用JQuery处理，或者使用ajax。