Question

I found this question and solution, however I’m not dealing with a text box, but a gridview field. Trigger jQueryUI datePicker on button click, send result to disabled input field

I have a Start Date column in an asp GridView with a TemplateField and if the ImageButton is clicked, I would like to trigger the jquery ui datepicker.

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

Based on the above referenced question, I have this. What do I need to make this work per row?

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

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

    });
</script>

There is also a hidden column with the hire date. I want to set the datepicker to only allow dates equal to or after the hire date. Or, after the date is selected validate that it doesn’t precede the hire date.

**** EDIT ****
Would it be easier to have the imagebutton open a modal dialog and pass the row’s start date and hire date to it? Then have an “update” button to check and save the date. But, I’m unsure of how to do that as well.

**** EDIT ****
Using @Miki Shah’s solution below, the datepicker is displaying, but I don’t know how to assign the selected date to the startdate field for that row, use the startdate field for that row as the current selected date when it opens, and use that row’s hire_date for validation or for restricting the available dates in datepicker.

Answer 1

You can assign datepicker by classname. Whenever image with “StartDateImg” classname is click, datepicker will show.

Sys.Application.add_load(function () {

            $(".StartDateImg").datepicker({
                duration: '',
                showTime: false,
                constrainInput: false,
                onSelect: function(dateText) {$(this).parents().find("span")[0]).innerHTML = dateText; 
            });
     }