Format Date in Bound Column

Consider we have a GridView that displays Employee information with FirstName, LastName, Email and DOB, where the DOB is stored with time in database.

<asp:GridView ID="gvUsersBF" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">

                    <Columns>

                        <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />

                        <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />

                        <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />

                        <asp:BoundField DataField="DOB" HeaderText="Date Of Birth" ReadOnly="True" />                                           

                    </Columns>

                    <FooterStyle BackColor="White" ForeColor="#330099" />

                    <RowStyle BackColor="White" ForeColor="#330099" />

                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

                    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

                    <HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />

        </asp:GridView>

To make the DOB column to display a short date format without the time, we need to include DataFormatString = "{0:d}"  for the BoundColumn to display a short date.

<asp:BoundField DataField="DOB" HeaderText="Date Of Birth" DataFormatString = "{0:d}"   ReadOnly="True" />           

Making the above setting only will not work. It is because, by default, HTML encode is turned “on” to prevent executing some dangerous script when injected through cross site scripting attacks. Because of this default setting, the text in the column will be encoded so that the cross site scripting is not executed. In order to make the above setting work, we need to make the HtmlEncode property of BoundColumn to false.

<asp:BoundField DataField="DOB" HeaderText="Date Of Birth" HtmlEncode="False" DataFormatString = "{0:d}"   ReadOnly="True" />           

For Long Date,

<asp:BoundField DataField="DOB" HtmlEncode="False" DataFormatString = "{0:D}" HeaderText="Date Of Birth[Long Date]" ReadOnly="True" /> 

For Long Time,

<asp:BoundField DataField="DOB" HtmlEncode="False" DataFormatString = "{0:T}" HeaderText="Date Of Birth[Long Time]" ReadOnly="True" />

Hence, setting HtmlEncode="False" for the bound column will do the magic.

Format Date in Template Column

Sometimes we will also use Template column to display the date inside a child control like Label.

<asp:GridView ID="gvUsersBF" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">

                    <Columns>

                        <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />

                        <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />

                        <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />

<asp:TemplateField HeaderText="Date Of Birth[Short Date]">

                        <ItemTemplate>

                        <asp:Label ID="lblDOB" runat="server" Text='<%# Bind("DOB") %>'></asp:Label>

                        </ItemTemplate>

                        </asp:TemplateField>                         

 </Columns>

                    <FooterStyle BackColor="White" ForeColor="#330099" />

                    <RowStyle BackColor="White" ForeColor="#330099" />

                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

                    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

                    <HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />

        </asp:GridView>

To bind the database column value to the child control we either use Bind() or Eval() methods. If you see the above code, we have used Bind() to bind DOB to the text property of Label control.

Text='<%# Bind("DOB") %>'

Using Eval in the place of Bind will also work. You use the Eval method when the control will only display values. You use the Bind method when users can modify a data value—that is, for data-update scenarios. 

These binding methods can take the formatting string as the next argument to set the format of the date displayed.

<ItemTemplate>

                        <asp:Label ID="lblDOB" runat="server" Text='<%# Eval("DOB","{0:d}") %>'></asp:Label>

                        </ItemTemplate>

                        </asp:TemplateField>   

For Long Date,

                        <asp:TemplateField HeaderText="Date Of Birth[Long Date]">

                        <ItemTemplate>

                        <asp:Label ID="lblDOB" runat="server" Text='<%# Bind("DOB","{0:D}") %>'></asp:Label>

                        </ItemTemplate>

                         </asp:TemplateField>

For Long Time,

                       <asp:TemplateField HeaderText="Date Of Birth[Long Time]">

                        <ItemTemplate>

                        <asp:Label ID="lblDOB" runat="server" Text='<%# Bind("DOB","{0:T}") %>'></asp:Label>

                        </ItemTemplate>

                        </asp:TemplateField> 

The following table shows some date format strings that can be used to format date in GridView columns,