Question

hopefully someone can help me out, I’ve been struggling for a couple days.

Basically what needs to happen is when the user clicks edit onto the gridview and clicks on a certain textbox a javascript calendar popups up and the user picks a date.

So far, I can set it statically and the calendar works for that one row, but not the other rows since the ID changes.

My ASP Code (id of textbox has been set to txtStartDate):

<asp:TemplateField SortExpression="StartDate" HeaderText="Start Date">
            <EditItemTemplate>
             <asp:TextBox ID="txtStartDate" onClick="ddlchange()" Runat="server" Text='<%#Bind("StartDate")%>'> 

                </asp:TextBox>         
            </EditItemTemplate>

            <ItemTemplate>
                <asp:Label ID="label1" runat="server" Text='<%#Bind("StartDate")%>'></asp:Label>                   
            </ItemTemplate>

            </asp:TemplateField>

Javascript Function that contains the Calendar

$("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker({ changeMonth: true });
//getter
var changeMonth = $("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker("option", "changeMonth");
//setter
$("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker("option", "changeMonth", true);

$("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker({ changeYear: true });
//getter
var changeYear = $("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker("option", "changeYear");
//setter
$("#ctl00_cphMain_GridView1_ctl02_txtStartDate").datepicker("option", "changeYear", true);

This works, for one textbox. It does not work for other since ‘ct102’ changes with every row.

Answer 1

Can’t you give your TextBoxes a class and then use a class selector to assign the datepicker?

e.g.:

<asp:TextBox ID="txtStartDate" onClick="ddlchange()" Runat="server" 
             Text='<%#Bind("StartDate")%>' CssClass="dateTextBox">

$(".dateTextBox").datepicker("option", "changeMonth", true);