0

在这里，我试图创建一个带有文本框的页面，我想在其中显示 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 中提供的样式表，但仍然没有运气。

感谢您的帮助。

4

4 回答 4

8 
$(document).ready(function () {

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

//or

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

});

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

于 2013-05-08T06:41:46.760 回答
2

你的 id 被破坏了。使用 css 类选择器。在这里查看我如何帮助其他用户 ，您可以使用负责更新面板的演示。

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


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

在此处查看演示

网站演示版在这里

于 2013-05-08T08:08:48.610 回答
1

看到您也必须将 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>
于 2013-05-08T06:42:06.357 回答
1

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

<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>
于 2013-05-08T06:41:14.543 回答