Extra dummy time added in gridview textbox on bootstrap datepicker

Question

I have added a bootstrap datepicker to several textboxes in a Gridview. But on selecting a date, a dummy time format as '00:00:00' is being added to the date in the textbox on onrowupdating in the gridview. I have tried to trim the date in the onrowbound, but to no avail.

Gridview code:

<asp:TemplateField HeaderText="AMR Plan">
                        <ItemTemplate>
     <asp:Label Text='<%# Eval("amr_plan") %> Width="130px" runat="server"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtAMRPlan" Text='<%# Eval("amr_plan") %>'  Width="130px" runat="server"></asp:TextBox>
                        </EditItemTemplate>                
                    </asp:TemplateField>

code for datepicker(javascript and html):

    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='bootstrap.min.css'
        media="screen" />
    <%--'https:/ /cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'--%>
    <!-- Bootstrap -->
    <!-- Bootstrap DatePicker -->
    <link rel="stylesheet" href="bootstrap-datepicker.css"
        type="text/css" />
    <%--href="https:/ /cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"--%>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"
        type="text/javascript"></script>
    <!-- Bootstrap DatePicker -->

   <script type="text/javascript">
        $(function () {
            $('[id*=txtAMRPlan]').datepicker({
                changeMonth: true,
                changeYear: true,
                format: "mm/dd/yyyy",
                language: "tr"
            });
             });

It would be of great help if someone can shed some light on this? Thanks in advance!

if you read the manual you see how to format your output -> https://bootstrap-datepicker.readthedocs.io/en/latest/ — Aristos, Jul 20 '21 at 13:44

score 0 · Accepted Answer · answered Jul 30 '21 at 09:13

I finally managed to get around a solution. Writing this answer just in case someone needs it later. So the problem was with the Eval function. Eval function is used to define only one way binding i.e. ReadOnly in the grid view. So Eval should be replaced with Bind function which is used for two way binding meaning read/write is possible. In my case grid view should have been be able to update the database field, which is possible with Bind. Observe this snippet..

<asp:TemplateField HeaderText="AMR Plan">
 <ItemTemplate>
 <asp:Label ID="lblAMR" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %> Width="130px" runat="server"> 
 </asp:Label>
 </ItemTemplate>
 <EditItemTemplate>
 <asp:TextBox ID="txtAMRPlan" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %>'  Width="130px" runat="server"></asp:TextBox>
  </EditItemTemplate>                
  </asp:TemplateField>

Also dont forget to give id to Label.

Few articles which might help Here & Here

Extra dummy time added in gridview textbox on bootstrap datepicker

1 Answers1