jquery datepicker自动关闭
我正在使用从日期文本框和日历按钮。当我点击日历按钮时,我应该从datepicker中选择日期。jquery datepicker自动关闭
以下是我的代码
<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>
当我运行的代码,然后点击按钮,打开日期选择器为小于第二或东西,关闭并刷新页面。
我的代码有什么问题?
这是由于ImageButton导致Postback。您可以使用图像,并在其上应用CSS样式以在悬停上显示手形光标。
放置语句返回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;
}
我试了一下..它工作正常的第一次......如果我选择日期和移除焦点压光皮(这是正确),但如果我想改变选定的日期,我必须再次点击日历按钮,但即使点击它后,什么也没有发生.. – user1181942 2012-07-17 07:22:56
显示你的日历按钮code..is输入type = submit?点击日历按钮,你必须调用一个方法..可以OpenDatePicker()函数..add返回false或event.preventDefault()禁止默认表单提交。
当您单击ImageButton时,页面执行回发。
1-您可以使用Image而不是ImageButton。
2-您可以在OpenDatePicker函数中返回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();
}
});
}
试试下面的代码:
<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"/>
希望这有助于
我现在使用图像...但它再次适用于第一次......没有任何反应第二次点击。我不会返回假。 – user1181942 2012-07-17 09:16:09