How to make a TemplateField read-only until the edit button is pressed?

Question

I have a GridView with various fields, one of which I have used TemplateFields for in order to have a datepicker in it. I've set the GridView to be editable and for all the other fields, this works great and they stay locked until the edit button is pressed.

Unfortunately, the TemplateField stays editable at all times. I want them to stay readonly until 'Edit' is clicked.

Some code to illustrate what I'm doing.

default.aspx

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
AllowSorting="True" AutoGenerateEditButton="True" 
OnPreRender="GridView1_PreRender" 
CssClass="gvdatatablem, table table-striped table-bordered" 
DataKeyNames="fmatter" PageSize="25">

<Columns>
    <asp:TemplateField HeaderText="Letter Sent">
        <ItemTemplate>
             <asp:TextBox ID="udtltrsent" runat="server" ReadOnly="false" Class='datepicker' ></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:CheckBoxField DataField="uheld" HeaderText="Held" 
    SortExpression="uheld" />
    <asp:BoundField DataField="udtresponse" HeaderText="Response" 
    SortExpression="udtresponse" />
    <asp:BoundField DataField="clname1" HeaderText="clname1" 
    SortExpression="clname1" readonly="true" />
</Columns>

</asp:GridView>

Javascript at the bottom to implement Datatables and Bootstrap datepicker

<script type="text/javascript">
    $(document).ready(function () {
    $('#example').DataTable();
    $('.datepicker').datepicker();
    });
</script>

Also the GridView1_PreRender method is just to change the table format, for Datatables to work

protected void GridView1_PreRender(object sender, EventArgs e)
        {
            if (GridView1.Rows.Count > 0)
            {
                //Replace the <td> with <th> and adds the scope attribute
                GridView1.UseAccessibleHeader = true;

                //Adds the <thead> and <tbody> elements required for DataTables to work
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

                //Adds the <tfoot> element required for DataTables to work
                //GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            }

Answer 1

The solution worked for me is Use label in ItemTemplate and Keep EditItemTemplate for Textboxes. After Edit get that textbox date to label text.

<Columns>
    <asp:TemplateField HeaderText="Letter Sent">
        <ItemTemplate>
             <asp:Label ID="lbldate" runat="server" ></asp:Label>
        </ItemTemplate>
        <EditItemTemplate>
             <asp:TextBox ID="udtltrsent" runat="server"  Class='datepicker' ></asp:TextBox>
        </EditItemTemplate>
    </asp:TemplateField>    
</Columns>