如何使用JQuery C＃在嵌套的網格視圖ASP.net中使用日期時間選擇器

Question

我已經在ASP.net文本框中實現了日期時間選擇器，但是當我在gridview或嵌套的gridview中使用它時，它會失敗。

我想要的是..通過此JQuery函數

$(function () {
    $("#<%= txtDate.ClientID %>").datepicker();
});

單擊給定樣本的嵌套網格視圖時顯示日期時間選擇器。

<asp:GridView ID="GV_Proc" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="Procedure_Code" OnRowDataBound="GV_ProcOnRowDataBound" 
    onselectedindexchanged="gvProc_SelectedIndexChanged" Width="512px">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>          
                <img alt = "" style="cursor: pointer" src="../images/plus.png"  />             
                <asp:Panel ID="pnldiagtype" runat="server" Style="display: none">
                    <asp:GridView ID="gvProctype" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
                        <Columns>
                            <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk_Select" runat="server"/>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>
                            <asp:BoundField ItemStyle-Width="20%" DataField="Procedure_Type_ID" HeaderText="Procedure Type Id" />
                            <asp:BoundField ItemStyle-Width="20%" DataField="Procedure_Code" HeaderText="Procedure Code" />
                            <asp:BoundField ItemStyle-Width="100%" DataField="Procedure_Type_Desc" HeaderText="Description"  />

                            <asp:TemplateField HeaderText="Remarks" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>
                                    <asp:TextBox ID="txt_Remarks" CssClass=".text" runat="server"></asp:TextBox>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>                           

                            <asp:TemplateField HeaderText="Date" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="">
                                <ItemTemplate>                                
                                    <asp:TextBox ID="txtDate" runat="server" />                                   
                                    <img src="../calender.png" />                                    
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" />
                                <ItemStyle Width="8%" />
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        <ItemStyle Width="8%" />
    </asp:TemplateField>
    <asp:BoundField ItemStyle-Width="150px" DataField="Procedure_Code" HeaderText="Procedure ID"/>
    <asp:BoundField ItemStyle-Width="150px" DataField="Procedure_Description" HeaderText="Procedure Name" />
</Columns>  

當我嘗試構建它時，它顯示

名稱“ txtDate”在當前上下文中不存在

任何幫助都是適用的

當我在沒有網格視圖的情況下使用相同的功能時，運行成功。

我正在使用以下腳本和樣式表

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

更新：

<script type="text/javascript">

$(document).ready(function () {
    $('.datepicker-text').datepicker();
});

並將textBox屬性更新為

<asp:TextBox ID="txtDate" runat="server" CssClass="datepicker-text"/> 

Answer 1

應該在DOM准備就緒時分配datepicker ，以便存在所述對象。

在日期文本框中放置一個css類，可使用它來選擇datepicker的文本框，因為可以有多行。

<asp:TextBox ID="txtDate" runat="server" CssClass="datepicker-text"/>

然后在document.ready上分配datepicker為

$('.datepicker-text').datepicker();

Answer 2

你為什么要使用多個jQuery。 您只能使用一個jquery（在生產環境中最少）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.js"></script>

然后，您將討論構建錯誤。 您可以發布服務器代碼嗎？ 您無法使用txtDate獲取txtDate，但必須從gridviewrow開始使用FindControl（“ txtDate”）

Answer 3

這個怎么樣。 獲取一個文本框並具有textmode屬性並指定類

<asp:TextBox ID="txtDate" runat="server" TextMode="datepicker-text"/>

由於存在多個script tags ，我認為它與其他script tags沖突，因此將其稱為

$(function () {
            var jQuery_1_11_4 = $.noConflict(true);
            jQuery_1_11_4(".datepicker-text").datepicker();
        });