c# - How to Add datepicker in asp.net Gridview control

Question

I am trying to add datepicker into a Asp.net Gridview control with column name (cheque_date), when i hardcode the id of Gridview column of a particular row it works fine but for only for that row, but i want to add datepicker for each and every row of Gridview. Below is my Html and jquery code that dose not work as expected. can anyone explain and solve my problem. Thanks in advance

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="loading" style="display: none"></div>
        <div class="table-responsive">
            <asp:GridView ID="gvBankPayment" CssClass="table table-bordered table-hover dataTable" runat="server" ShowHeaderWhenEmpty="true" ShowFooter="true" AutoGenerateColumns="False" OnRowEditing="gvBankPayment_RowEditing" OnRowDataBound="gvBankPayment_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="Chart of Account">
                        <ItemTemplate>
                            <asp:DropDownList ID="coa_id" CssClass="form-control" AppendDataBoundItems="true" runat="server"></asp:DropDownList>
                            <asp:RequiredFieldValidator ID="RFVCOA" ControlToValidate="coa_id" ForeColor="Red" runat="server" Display="Dynamic" ErrorMessage="Select COA"></asp:RequiredFieldValidator>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Remarks">
                        <ItemTemplate>
                            <asp:TextBox ID="remarks" CssClass="form-control" Text='<%#Eval("remarks")%>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cheque Date">
                        <ItemTemplate>
                            <asp:TextBox ID="cheque_date" AutoPostBack="false" CssClass="form-control myDatePickerClass" placeholder="Cheque Date" Text='<%#Eval("cheque_date") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cheque No">
                        <ItemTemplate>
                            <asp:TextBox ID="cheque_no" CssClass="form-control" Text='<%#Eval("cheque_no") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="amount" CssClass="form-control" Text='<%#Eval("amount") %>' runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RFVAmount" ControlToValidate="amount" ForeColor="Red" runat="server" ErrorMessage="Enter Amount"></asp:RequiredFieldValidator>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Tax Type">
                        <ItemTemplate>
                            <asp:DropDownList ID="tax_id" CssClass="form-control" runat="server"></asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="WHT(%)">
                        <ItemTemplate>
                            <asp:TextBox ID="wht_tax_percent" CssClass="form-control calculateWhtAmount" Text='<%#Eval("wht_tax_percent") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="WHT Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="wht_tax_amount" CssClass="form-control" Text='<%#Eval("wht_tax_amount") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Total Amount">
                        <ItemTemplate>
                            <asp:TextBox ID="total_amount" CssClass="form-control tamount" Text='<%#Eval("total_amount") %>' runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:ImageButton ID="deleteButton" CssClass="mydelete" runat="server" ImageUrl="~/img/x.png" OnClick="deleteButton_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:ImageButton ID="ButtonAdd" CssClass="" ImageUrl="~/img/plus-sign-button.png" runat="server" OnClick="ButtonAdd_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <EmptyDataTemplate>No Record Available</EmptyDataTemplate>
            </asp:GridView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

My jquery code is below:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    $("#ContentPlaceHolder1_gvBankPayment").on('click', '.myDatePickerClass', function () {
        var currentRow = $(this).closest("tr");

        var input = ('#' + currentRow.find("td:eq(2) input").attr('id'));
        $(input).datepicker({
            dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
        });
    });
});

Answer 1

You should change your script to this. It is also better to make a function and not place it inside the endRequest. Because as your code is now it will not bind the datepicker on first load, but only after a UpdatePanel update. Note the use of ClientID

<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        bindDatePicker();
    });

    bindDatePicker();

    function bindDatePicker() {
        $("#<%=gvBankPayment.ClientID %> .myDatePickerClass").focusin(function () {
            $(this).datepicker({
                dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '1950:2013', yearRange: '1950:2050'
            });
        });
    }
</script>