1

我正在使用日期文本框和日历按钮。当我点击日历按钮时，我应该得到日期选择器，我可以从中选择日期。

以下是我的代码

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    function OpenDatePicker() {
        $("#<%=datepicker.ClientID %>").datepicker({ changeMonth: true,
            changeYear: true,
            duration: "slow",
            dateFormat: "dd-mm-yy",
            closeText: "X",
            showButtonPanel: true,
            onSelect: function (dateText, inst) { $("#<%=tbFromDate.ClientID %>").val(dateText); $(this).datepicker("hide"); },
            onClose: function (dateText, inst) {
                $("#<%=datepicker.ClientID %>").blur();
            }
        });

    }      

</script>

ASP代码：

<div id="datepicker" runat="server">
    <asp:TextBox runat="server" ID="tbFromDate"></asp:TextBox><asp:ImageButton runat="server"  ID="ibtnDateFrom" ImageUrl="~/Images/date.gif" OnClientClick="javascript:OpenDatePicker();" /></div>

当我运行代码并单击按钮时，日期选择器打开不到一秒或其他时间并关闭并刷新页面。

我的代码有什么问题？

4

5 回答 5

2

这是由于 ImageButton 导致回发。您可以只使用图像，并在其上应用 css 样式以在悬停时显示手形光标。

于 2012-07-17T07:21:27.500 回答
1

当您单击 ImageButton 时，您的页面会执行回发。

1-您可以使用 Image 代替 ImageButton。
2-您可以在 OpenDatePicker 函数中放置 return false 以防止回发。
3-您可以使用 datepicker 的内置图像支持。

   function OpenDatePicker() {
                        $("#<%=datepicker.ClientID %>").datepicker({ 
                            buttonImage: "../Images/date.gif",
                            changeMonth: true,
                            changeYear: true,
                            duration: "slow",
                            dateFormat: "dd-mm-yy",
                            closeText: "X",
                            showButtonPanel: true,
                            onSelect: function (dateText, inst) { $("#<%=tbFromDate.ClientID %>").val(dateText); $(this).datepicker("hide"); },
                            onClose: function (dateText, inst) {
                                $("#<%=datepicker.ClientID %>").blur();
                            }
                        });
                    }
于 2012-07-17T07:24:09.740 回答
0

放置语句返回false；在您的 OpenDatePicker() 函数中

function OpenDatePicker() {
    $("#<%=datepicker.ClientID %>").datepicker({ changeMonth: true,
        changeYear: true,
        duration: "slow",
        dateFormat: "dd-mm-yy",
        closeText: "X",
        showButtonPanel: true,
        onSelect: function (dateText, inst) { $("#<%=tbFromDate.ClientID %>").val(dateText); $(this).datepicker("hide"); },
        onClose: function (dateText, inst) {
            $("#<%=datepicker.ClientID %>").blur();
        }
    });
return false;
}
于 2012-07-17T07:20:14.893 回答
0

向您显示日历按钮代码..是否输入 type=submit ？单击日历按钮时，您必须调用一个方法。它可以是 OpenDatePicker() 函数。添加返回 false 或 event.preventDefault() 以禁止默认表单提交。

于 2012-07-17T07:23:18.563 回答
0

尝试以下代码：

 <script type="text/javascript">
     $(function() {
            $("#<%= tbFromDate.ClientID %>").datepicker({
            changeMonth: true,
            changeYear: true,
            duration: "slow",
            dateFormat: "dd-mm-yy",
            closeText: "X",
            showButtonPanel: true
            });

            $("#<%= ImageButton1.ClientID %>").click(function() {
              $("#<%= tbFromDate.ClientID %>").datepicker('show');
            });
        });
    </script>


    <asp:TextBox runat="server" ID="tbFromDate"></asp:TextBox>
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/date.gif"/>

希望这可以帮助

于 2012-07-17T07:28:59.657 回答