0

My code:

<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>

Followed example from here: enter link description here

When I look at the source, i do not see any value populate in txtDate text box, which i suspect is then not firing the jquery method..

how do i debug?

Community
  • 1
  • 1
qazwsx
  • 13
  • 3

2 Answers2

1

Your code looks good, but the datepicker is part of jQuery UI which is a separate download/script--it's not included in the jquery-1.4.1 file, and it looks like that's the only script you have referenced.

EDIT: Here's an example that works for me:

<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>

You can download a copy of jQuery UI here, and here's some more information on the datapicker.

ataddeini
  • 4,931
  • 26
  • 34
  • thanks for pointing to latest jquery. got it down on my machine. however in my source aove i have a txtDate text box which in which i hard coded the text. that value does not display nor does the date picker fn get called. the cssClass is just an id? i do not have that class defined in my style sheet – qazwsx May 13 '11 at 00:40
  • @qazwsx: So you've included the jQuery-UI script and it still isn't working? Server side code controls can be tricky sometimes. I'll play around with it and see what I can find. – ataddeini May 13 '11 at 00:43
  • i downloaded the code and placed in file and calling it this way downloaded this one: http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ – qazwsx May 13 '11 at 00:47
  • @qazwsx: Ah, I see--yes, that's the latest jQuery, but you also need to download and include [jQuery UI](http://jqueryui.com/download). The datapicker is part of a separate download even though it's misleading because the it's documented on the regular jQuery site. I was able to get a sample working--I'll post my code to show you what it looks like. – ataddeini May 13 '11 at 00:54
  • i downloaded the following – qazwsx May 13 '11 at 01:04
  • many thanks for the code post. i had my txtDate within edittemplate tag which i assume does not work. i switched it to itemtemplate and it works , however the datepicker pops up and its in japanese. is there a default setting i should use to switch it to english? – qazwsx May 13 '11 at 01:13
  • Japanese, hmm...that one I'm not sure about. There is a [localization](http://jqueryui.com/demos/datepicker/#localization) section that might be useful to you. – ataddeini May 13 '11 at 02:13
1

Based on the active/voted Answer, I think one more statement shall be added for better visibility of the datepicker. Otherwise it would be blurred/dimmed by the background. The proposed statement is put at 2nd line (assuming jquery-ui-1.8.14.custom.css file is downloaded & put in Css folder):

<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>
...
Sohel Barua
  • 11
  • 1