Question

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

以下是我的代码

<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>

Aspx代码：

<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>

当我运行代码并单击按钮时，datepicker打开的时间少于秒或其他东西并关闭并刷新页面。

我的代码出了什么问题？

Answer 1

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

Answer 2

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

1-您可以使用Image而不是ImageButton。
2-您可以在OpenDatePicker函数中放置return false来预回发回发。
3-您可以使用datepicker的内置Image支持。

   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();
                            }
                        });
                    }

Answer 3

发表声明返回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;
}

Answer 4

显示日历按钮代码..输入类型=提交？点击日历按钮，你必须调用一个方法..它可以是OpenDatePicker（）函数...添加false或event.preventDefault（）来禁止默认表单提交。

Answer 5

尝试以下代码：

 <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"/>

希望这有帮助

Jquery datepicker自动关闭

5 个答案: