使用 JQuery 在文本框中使用 Datepicker

Question

在这里，我正在尝试创建一个带有文本框的页面，我想在其中显示 CalendarExtender（如在 AJAXToolkit 中），但现在我试图通过使用 JQuery 来获取它，问题是，我不能当我单击文本框时，使日历 UI 弹出，我的上 aspx 页面如下所示：

<link href="../Support/StyleSheet/PageStyle.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#TbOutboundOn").datepicker({
    });
</script>

我尝试使用的文本框是：

  <tr>
                    <td align="left" width="120px" height="25px">
                        <asp:CheckBox ID="CbOutboundOn" Text=" Outbound On" runat="server" />
                    </td>
                    <td align="center" class="style1">
                        <asp:Label ID="Label1" runat="server" Text=":"></asp:Label>
                    </td>
                    <td align="left" width="200px">
                        <asp:TextBox ID="TbOutboundOn" runat="server" Width="194px" placeholder="dd/mm/yyyy"></asp:TextBox>
                    </td>
                    <td width="645px">
                    </td>
                </tr>

我认为它足够好，但不是，当我单击“TbOutboundOn”中的文本框时无法显示日历，一位朋友建议样式表是问题，但我不太明白，谁能帮我解决我的问题？顺便说一句，我使用http://jqueryui.com/datepicker/#default 作为我的参考。

我已经尝试复制 jqueryui 的 datepicker 站点引用的所有样式表，并将其与我自己的样式表结合起来，但它仍然无法正常工作。我也尝试只使用 jqueryui datepicker 中提供的样式表，但仍然没有运气。

感谢您的帮助。

Answer 1

$(document).ready(function () {

$('#TbOutboundOn').datepicker();

//or

$('#TbOutboundOn').datepicker({ dateFormat: "dd-M-yy" });

});

你可以在这里找到其他参数来修改你的日期选择器：http://api.jqueryui.com/datepicker/

Answer 2

你的 id 被破坏了。使用 css 类选择器。看看我是如何帮助另一个用户 here 的，您可以使用负责更新面板的演示。

<script type="text/javascript">
  $(function () {
$(".clDate").datepicker(); 
         }   
</script>


  <asp:TextBox ID="TbOutboundOn" runat="server" CssClass="clDate" </asp:TextBox>

查看演示here

网站演示版here

Answer 3

看到你也必须为日历使用 css 文件，你错过了日历的默认关闭();：

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript">
</script>
<script type="text/javascript">
  $(function () {
      $("#TbOutboundOn").datepicker();  //<-- missing default closing this way.
  });
</script>

Answer 4

更新以下代码： 你的代码：

<script type="text/javascript">
    $(function () {
        $("#TbOutboundOn").datepicker({
    });
</script>

使用以下更新：

<script type="text/javascript">
    $("#TbOutboundOn").datepicker();    
</script>

Ajax 响应和 Date piker 代码：

<tr>
                    <td align="left" width="120px" height="25px">
                        <asp:CheckBox ID="CbOutboundOn" Text=" Outbound On" runat="server" />
                    </td>
                    <td align="center" class="style1">
                        <asp:Label ID="Label1" runat="server" Text=":"></asp:Label>
                    </td>
                    <td align="left" width="200px">
                        <asp:TextBox ID="TbOutboundOn" runat="server" Width="194px" placeholder="dd/mm/yyyy"></asp:TextBox>
                    </td>
                    <td width="645px">
                    </td>
                </tr>
<script type="text/javascript">
    $("#TbOutboundOn").datepicker();    
</script>