gridview中的日期选择器没有弹出 - vs2010

Question

我的代码：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false">
        <Columns>
           <asp:BoundField DataField="Col1" HeaderText="Column 1" />
           <asp:BoundField DataField="Col2" HeaderText="Date 1" />
           <asp:BoundField DataField="Col3" HeaderText="Date 2" />
           <asp:TemplateField HeaderText="Date 2" >
                <EditItemTemplate>
                    <asp:TextBox ID="txtDate" CssClass="datepickerCompleted"
                        runat="server" Text="2011/1/1" ></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>        
           <asp:BoundField DataField="Col4" HeaderText="Date 3" />
           <asp:TemplateField HeaderText="Date 3"></asp:TemplateField>
        </Columns>
    </asp:GridView>
   <script type="text/javascript" language="javascript" src="<%= VirtualPathUtility.ToAbsolute("~/Script/jquery-1.4.1-vsdoc.js")%>"></script>
<script type="text/javascript">

    $(function () {
        $(".datepickerCompleted").datepicker();
    });
</script>
</asp:Content>

以下示例：在此处输入链接说明

当我查看源代码时，我没有在txtDate文本框中看到任何值，我怀疑它不会触发jquery方法。

我该怎么调试？

Answer 1

你的代码看起来不错，但是datepicker是jQuery UI的一部分，它是一个单独的下载/脚本 - 它没有包含在jquery-1.4.1文件中，看起来这是你引用的唯一脚本。

编辑 ：这是一个适合我的例子：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $(".datepickerCompleted").datepicker();
        });
    </script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false">
        <Columns>
           <asp:TemplateField HeaderText="Date 2">                
                <ItemTemplate>
                    <asp:TextBox ID="txtDate" CssClass="datepickerCompleted" runat="server" Text="2011/1/1" ></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
    </asp:GridView>

</asp:Content>

你可以在这里下载jQuery UI的副本， 这里有关于数据datapicker更多信息。

Answer 2

根据活跃/投票的答案，我认为应该再添加一个声明，以便更好地查看日期选择器 。 否则它会被背景模糊/变暗。 建议的声明放在第二行（假设jquery-ui-1.8.14.custom.css文件已下载并放入Css文件夹中）：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<link type="text/css" href="Css/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
...