title: How Can I put Date Picker in Gridview in edit mode ASP .Net
body: <p>I want to change the default text field in a gridview when in edit mode to a javascript date picker? How can I code it?</p>
  
  <p>Code below (Gridview):</p>
  
  <pre><code>&lt;asp:GridView id="grdViewEmpList" runat="server" AutoGenerateColumns="false" PageSize="5" allowpaging="true" Font-Size="11px" OnRowDataBound="grdViewEmpList_RowDataBound"
              GridLines="Both" ShowFooter="false" CssClass="gridview" CellPadding="4" Width="750px" OnRowEditing="grdViewEmpList_RowEditing"
              PagerSettings-Mode="Numeric" AllowSorting="true" autopostback="true" ShowHeaderWhenEmpty="True" OnRowCancelingEdit="grdViewEmpList_RowCancelingEdit"
              EmptyDataText="No record found" OnRowCreated="grdViewEmpList_RowCreated" OnPageIndexChanging="grdViewEmpList_PageIndexChanging" OnRowUpdating="grdViewEmpList_RowUpdating"&gt;
          &lt;RowStyle Wrap="true" ForeColor="#666666" BorderColor="#FFFFFF" BorderWidth="0" BackColor="#CCCCFF" CssClass="gridview_alter"/&gt;
          &lt;AlternatingRowStyle Wrap="true" ForeColor="#666666" BorderColor="#CCCCCC" BorderWidth="0" BackColor="#FFFFFF" CssClass="gridview_alter"/&gt;
          &lt;Columns&gt;
              &lt;asp:CommandField ShowEditButton="True" EditText="Edit" UpdateText="Save" ButtonType="Image" ItemStyle-HorizontalAlign="Center" HeaderText="Action" EditImageUrl="~/Images/dotNet/pencil.png" CancelImageUrl="~/Images/dotNet/edit-not-validated-icon.png" UpdateImageUrl="~/Images/dotNet/edit-validated-icon.png"/&gt;
              &lt;asp:BoundField DataField="EMP_ID" readonly="true" ItemStyle-Height="20px" HeaderText="Employee ID" HeaderStyle-CssClass="allWidth100" /&gt;
              &lt;asp:BoundField DataField="NAME" readonly="true" HeaderText="Name" HeaderStyle-CssClass="allWidth460" /&gt;
              &lt;asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter" /&gt;
          &lt;/Columns&gt;
          &lt;PagerSettings Mode="Numeric" PageButtonCount="5" Position="Bottom" /&gt;
          &lt;PagerStyle ForeColor="#FFCC33" HorizontalAlign="left" CssClass="gridview_pager"/&gt;
      &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>Code of the Date Picker in HTML which I want to put in above gridview in <code>EFF_DATE</code> column:</p>
  
  <pre><code>&lt;input type="text" id="txtEffDate" name="txtEffDate" class="txtCommon allWidth80" value="" readonly="readonly" /&gt;
  &lt;img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" /&gt;
  </code></pre>