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>

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>

コードを実行してボタンをクリックすると、日付ピッカーが数秒以内に開き、閉じてページが更新されます。

私のコードで何が間違っていますか?

4

5 に答える 5

2

これは、ポストバックを引き起こす ImageButton が原因です。画像を使用して css スタイルを適用し、ホバー時にハンド カーソルを表示することができます。

于 2012-07-17T07:21:27.500 に答える
1

ImageButton をクリックすると、ページはポストバックを実行します。

1- ImageButton の代わりに Image を使用できます。
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

ステートメント return 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

カレンダーボタンのコードを見せてください.input 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 に答える