使用 Ajax 的日期控件解决 IE 不支持 TextBox 的 TextMode 为 Date 的问题

在开发网页的过程中,需要表单提供一个日期的输入,实现十分简单:

<asp:TextBox ID="Text_DemoData" runat="server" TextMode="Date">

写完之后发现一个问题,在 IE 浏览器上点击输入框没有反应,但是在别的浏览器比如 Chrome, Firefox 都可以正常使用,于是得出结论是浏览器不支持的问题。

经过查找资料,发现可以使用 Ajax 控件来解决这个问题,具体步骤如下:

在 aspx 文件中注册 Ajax 的相关控件命名空间:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

注册一个 ScriptManager 管理控件来启用 ASP.NET 的 Ajax 功能:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

最后,创建一个 TextBox 和一个日历插件,完成绑定即可:

<asp:TextBox ID="Text_GMDate" runat="server" ></asp:TextBox>
<ajaxtoolkit:calendarextender id="calTargetDate" runat="server" format="yyyy-MM-dd" targetcontrolid="Text_GMDate" popupbuttonid="Text_GMDate"> </ajaxtoolkit:calendarextender>

在使用 ajaxtoolkit:calendarextender 的时候,有几个地方需要注意一下:

  1. 必须包括 Ajax Extensions 的控件 ScriptManager 来提供 Ajax 支持;
  2. Format 属性为定制日期格式,等同于 DateTime.ToString(formatString),这里建议使用"yyyy-MM-dd"的方式,因为正常 date 的输入返回值就是此形式,控件可以直接识别并且转化为 DateTime 输出(输出格式不一定为"yyyy-MM-dd"),这样写的好处是与 TextMode="Date" 的 TextBox.Text 返回值保持一致;
  3. TargetControlID 为设置控件的焦点获取,日期获取结果将返回到这个 ID 的控件中;
  4. PopupBottonID 为设置弹出面板的控件,点击此 ID 控件时弹出日期面板;

另外还有一个问题,若将 ReadOnly 属性设置为 true, .cs 文件将无法获取此 TextBox 中的值。

解决方法:戳:TextBox ReadOnly 设置为 true 的时候后台无法取值的问题

猜你喜欢

转载自blog.csdn.net/weixin_42465080/article/details/80857411
今日推荐