Using a date picker on a BoundField DataField

Question

Is there a way to add a date picker to a BoundField in a GridView? I have a very simple Gridview that allows a user to insert, edit/update, and delete vendors from a database table. I was able to use a jQuery script I found to add a date picker to a field that is NOT a BoundField, but I'm having trouble getting it on a BoundField since I cannot specify an Id. Here is the function:

<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=TextBox2]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    });
    $(function () {
        $("[id*=effDt]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    });
</script>

Here is the ASP code where the date picker DOES work:

                   <td style="font-style: italic;">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                            ControlToValidate="TextBox2"
                            Display="Static"
                            ErrorMessage="Effective Date Is Required"
                            runat="server"
                            ValidationGroup="addVendor" /></td>

Here is where I also want to use a date picker on "effDt" but I am not sure how:

    <asp:GridView ID="VendorView" runat="server" DataSourceID="VendorSrc" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" HorizontalAlign="Center"
                PageSize="10" BorderColor="#921E33" BorderStyle="Solid" HeaderStyle-BackColor="#921E33" HeaderStyle-ForeColor="White" CellPadding="10" CellSpacing="0" AlternatingRowStyle-BorderStyle="Solid" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#921E33" Font-Size="Small" RowStyle-BackColor="#63666A" RowStyle-BorderStyle="Solid" RowStyle-BorderColor="Gray" RowStyle-ForeColor="White" SelectedRowStyle-BackColor="#F3D03E" SelectedRowStyle-ForeColor="Black" PagerStyle-BackColor="#921E33" PagerStyle-ForeColor="White" PagerSettings-Mode="NextPreviousFirstLast" PagerSettings-NextPageText="Next Page" PagerStyle-HorizontalAlign="Center" PagerStyle-Width="50%" PagerStyle-CssClass="cssPager" EmptyDataText="No Records Found" AutoGenerateSelectButton="false" PagerSettings-PageButtonCount="10" PagerSettings-PreviousPageText="Previous Page" PagerSettings-FirstPageText="First Page" PagerSettings-LastPageText="Last Page" Width="100%" EmptyDataRowStyle-ForeColor="White" DataKeyNames="vendorId" OnRowDataBound="VendorView_OnRowDataBound">
                <Columns>
                    <asp:BoundField DataField="vendorId" HeaderText="ID" InsertVisible="false" ReadOnly="true" SortExpression="ID" />
                    <asp:BoundField DataField="vendorName" HeaderText="Vendor" SortExpression="Vendor" />
                    <asp:BoundField DataField="effDt" HeaderText="Effective Date" SortExpression="Effective Date" />
                    <asp:BoundField DataField="changeDt" HeaderText="Last Updated" ReadOnly="true" SortExpression="Last Updated" />
                    <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true" ItemStyle-Width="100" />
                </Columns>
            </asp:GridView>

Do I need to change to ItemTemplate instead? Or is there a simpler way to just adjust the function (or perhaps a better function to use)?

Thanks!

Answer 1

Well, the asp.net textbox has a rather nice built-in date picker, and I would suggest using as such.

So, simply drop in a standard asp.net textbox, but set the textmode as date.

Hence, say this markup:

        <asp:TextBox ID="TextBox1" runat="server"
           TextMode="Date" >
        </asp:TextBox>

And the result is this:

Note how it also automatic adds a date "icon" beside the date picker.

So, yes, use a TemplateField, and simply drop in a standard text box.

As such, I see little benefit nor reason to adopt the jQuery.UI date picker when a good working date picker is already built in. There might be some jQuery.UI datepicker options you need, but if you looking for a date picker, the standard built in one should suffice for most of your requirements.

So, say we add this text box to the GridView:

        <asp:TemplateField HeaderText="Booking Date">
            <ItemTemplate>
                <asp:TextBox ID="txtBooking" runat="server"
                    Text='<%# Eval("BookingDate", "{0:d}") %>'
                    TextMode="Date" 
                    ></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

Note how we "format" the date using the 2nd overload of the Eval() function.

Hence, the above results in this: