3

この質問と解決策を見つけましたが、テキストボックスではなく、グリッドビューフィールドを扱っています。ボタンをクリックするとjQueryUIdatePickerをトリガーし、無効な入力フィールドに結果を送信します

TemplateFieldを使用してaspGridViewに開始日列があり、ImageButtonがクリックされた場合、jqueryuidatepickerをトリガーしたいと思います。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns=False allowsorting = True
        SkinID=FACGrid onload="GridView1_Load" onsorting="GridView1_Sorting" 
        onrowdatabound="GridView1_RowDataBound" 
        onrowediting="GridView1_RowEditing" 
        onrowcancelingedit="GridView1_RowCancelingEdit" 
        onrowupdating="GridView1_RowUpdating">
    <Columns>     
<asp:TemplateField HeaderText="Start Date" SortExpression="start_dt">
                    <EditItemTemplate>
                        <asp:Label ID="StDt" runat="server" CssClass="StartDate" Text='<%# Eval("start_dt", "{0:d}") %>'></asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="StDt" runat="server" Text='<%# Bind("start_dt", "{0:d}") %>'></asp:Label>
                        <asp:ImageButton ID="startdtimage" CssClass="StartDateImg" runat="server" ImageUrl="../images/pencil.gif" Visible='<%# HasUpdateStartDateRole() %>' Width="18px" Height="18px" />
                    </ItemTemplate>
                </asp:TemplateField>

上記の質問に基づいて、私はこれを持っています。これを行ごとに機能させるには何が必要ですか？

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArrivalDate").datepicker();

        $(".StartDateImg").click(function () {
            $(".StartDate").datepicker("show");
        });

    });
</script>

採用日が記載された非表示の列もあります。採用日以降の日付のみを許可するように日付ピッカーを設定したいと思います。または、日付を選択した後、それが採用日より前でないことを確認します。

****編集****画像ボタンでモーダルダイアログを開き、行の開始日と採用日を渡す方が簡単でしょうか？次に、日付を確認して保存するための[更新]ボタンがあります。しかし、私もそれを行う方法がわかりません。

****編集****以下の@MikiShahのソリューションを使用すると、日付ピッカーが表示されますが、選択した日付をその行の開始日フィールドに割り当てる方法がわかりません。その行の開始日フィールドを開いたときに現在選択されている日付。その行のhire_dateを使用して、検証またはdatepickerで使用可能な日付を制限します。

4

3 に答える 3

3

クラス名で日付ピッカーを割り当てることができます。「StartDateImg」クラス名の画像をクリックすると、datepickerが表示されます。

Sys.Application.add_load(function () {

            $(".StartDateImg").datepicker({
                duration: '',
                showTime: false,
                constrainInput: false,
                onSelect: function(dateText) {$(this).parents().find("span")[0]).innerHTML = dateText; 
            });
     }
于 2012-10-19T07:16:26.713 に答える
1

編集：htmlでの作業

私は（あまりエレガントではない）解決策を思いついたので、それを使用できるかどうかはあなたの電話です。:)

脚本

<script type="text/javascript">
    $(document).ready(function () {
        $(".starter").each(function () {
            $(this).children(".StartDateImg").datepicker().hide();
        });
    });

    $(".starter").each(function () {
        $(this).children(".link").click(function () {
            $(this).nextAll().show();
        });
    });
</script>

HTML

<div class="starter">
    <a class="link" href="#">test</a>
    <div class="StartDateImg">
    </div>
</div>

日付ピッカーの問題は、インラインまたはポップアップとして表示することを自動的に選択することです。=> divまたはspanに適用するとインライン、入力/テキストボックスに適用するとポップアップ

したがって、私のソリューションは、日付ピッカーをdivにインラインでロードし、このdivを非表示にして、正しいリンクが押されたときに表示します。

これは、div =>を表示するだけで、ポップアップを取得するために、いくつかのcssまたはjavascriptを記述して、divをポップアップのように「表示」する必要があります。

それがお役に立てば幸いですが、もっとエレガントな解決策が見つかるかもしれないと思います。

于 2012-10-19T06:35:15.470 に答える
0

これを試すことができます....グリッドビューのテンプレート列は次のようになります.....

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button Text="calendar" runat="server" CssClass="Calendar"    onclientclick="return Testing();" />
    </ItemTemplate>
</asp:TemplateField>

スクリプト関数は次のようになります.........。

<script type="text/javascript" >
        function Testing(){
            $('.calendar').each(function () {
                $(this).glDatePicker();
            });
            return false;
        }
</script>

ここで、日付ピッカーから日付を選択すると、ボタンの値が変更されることがわかります。つまり、日付が表示されます.....ここでボタンを使用してglDatePickerを呼び出しました：Dお役に立てば幸いです

于 2012-10-19T09:32:52.180 に答える