ASP.NET - how to add calendar control on gridview column on edit mode in asp.net c#

Asked By Kamran Khan on 27-Feb-17 07:53 AM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FilesUpload.aspx.cs" Inherits="EmailAnalytics.FilesUpload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   
    <title>Search Package</title>
 
    <style type="text/css">
    .inline{ display: inline;
   color:White;
    /*background-color:aqua;*/
    }
</style>
    <style type="text/css">

    .buttonUser {

    color:green;
    background-color:aqua;
    }

    </style>
   <%-- <script src="jquery-3.1.1.js"></script>
   <script type="text/javascript">
   $(document).ready(function () {
     $('.dummy').datepicker();
   });
</script>--%>
 <%--  <script type="text/javascript">

   function comparedate() {
   var fromdate = document.getElementById("id_fromdate");
   var todate = document.getElementById("id_todate");
   if (fromdate < todate) {
   alert("Start date should be less than end date");
   return false;
   }
   }
   </script>--%>
    <%--<script type="text/javascript">
    function validate() {
    //Get the Datepickeer1
    var RadTimePicker1 = $find("<%= CalendarFrom.ClientID %>");
    //Get the Datepickeer2
    var RadTimePicker2 = $find("<%= CalendarTo.ClientID %>");
    //Get the selected values
    var Date1 = new Date(RadTimePicker1.get_selectedDate());
    var Date2 = new Date(RadTimePicker2.get_selectedDate());
    //Check if Datel is less than Date2
    if ((Date2 - Date1) < 0) {
      //if so then show the message
      alert("from date should be less than to date and to date should be greater than from date");
      return false;
    }
    else {
      return true;
    }

    }
    </script>--%>
    
 <%--  <script  type="text/javascript">
   $(function () {
   $(".youpi").datepicker();
   });

</script>--%>
    <script src="_scripts/jquery-1.3.2.min-vsdoc.js"></script>
    <script src="_scripts/jquery-1.3.2.min.js"></script>
    <script src="_scripts/jquery-ui-1.7.1.custom.min.js"></script>
    <script >
    $(function () {
    $(".txtDate").datepicker();
    });
    </script>
    <style type="text/css">
    .labelStyle {
   font-size:18px;
    font-weight:bold;
    }
     

    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
    $("#<%= GridView1.ClientID %>").on("click", "tr td:last-child text:last", function () {
    $(this).datepicker();
    $(this).datepicker("show");
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    <h2>Package Dashboard</h2>
    <%-- <h3>Search package by date</h3>--%>
    </div>
   <fieldset>
    <legend>Search Package by Date</legend><br /><br />
    <div>

    <span>From Date</span>
   <asp:Calendar ID="CalendarFrom" runat="server" CssClass="inline" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px" >
   <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
   <NextPrevStyle VerticalAlign="Bottom" />
   <OtherMonthDayStyle ForeColor="#808080" />
   <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
   <SelectorStyle BackColor="#CCCCCC" />
   <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
   <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
   <WeekendDayStyle BackColor="#FFFFCC" />
    </asp:Calendar>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp       
    <span>To Date</span>
   <asp:Calendar ID="CalendarTo" runat="server" CssClass="inline" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
   <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
   <NextPrevStyle VerticalAlign="Bottom" />
   <OtherMonthDayStyle ForeColor="#808080" />
   <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
   <SelectorStyle BackColor="#CCCCCC" />
   <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
   <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
   <WeekendDayStyle BackColor="#FFFFCC" />
    </asp:Calendar>&nbsp&nbsp
<%--    <asp:Button ID="btnsearch" runat="server" Text="Search"   CssClass="inline" OnClick="btnsearch_Click" OnClientClick=" return validate();"/>--%>
     <asp:Button ID="btnsearch" runat="server" Text="Search" CssClass="inline" OnClick="btnsearch_Click" BackColor="#008040"  />&nbsp&nbsp  <asp:Label ID="Label3" runat="server"  ForeColor="Red"  CssClass="labelStyle"  ></asp:Label>
     
    <br />
    <br />
    <br />
    <br />
    </div>
    </fieldset>
    <fieldset>
    <legend>Select Package To Upload</legend><br /><br />
    <div>
    File To Upload : &nbsp&nbsp&nbsp&nbsp
    <%--  <asp:fileupload runat="server" ID="FileUpload1" CssClass="inline"></asp:fileupload>&nbsp&nbsp--%>
    <asp:FileUpload ID="FileUpload1" runat="server" />&nbsp&nbsp&nbsp&nbsp
   <asp:Button  ID="btnUpload" runat="server" Text="Upload" CssClass="inline"  OnClick="btnUpload_Click" BackColor="#008040"   />
    <br />
    <br />
    <br />
    <asp:Label ID="Label1" runat="server"  ForeColor="Red"  CssClass="labelStyle"  ></asp:Label>
   <asp:Label ID="Label2" runat="server"  ForeColor="Green"  CssClass="labelStyle"  ></asp:Label>

    <br />
    
    <asp:GridView ID="GridView1" runat="server"  DataKeyNames="FileName" CellPadding="6" GridLines="None" CssClass="inline"  AutoGenerateEditButton="True" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellSpacing="1" OnRowDataBound="GridView1_RowDataBound">
    <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
    <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
    <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#594B9C" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#33276A" />
    

    </asp:GridView>
    <br />
    <br />
    <br />
    
    </div>
   <div>     
   </div>
    </fieldset>
    </form>
</body>
</html>

I have 2 calendar controls and 1 grid view control.  when user selects date from both calendar control ( from and To)  i have made query to display records between selected month on search button click. now what  i am displaying 3 colums[FileName,UplodDate,ProcessedDate] now what i have to do is i want to display calendar control on processedDate column on edit mode click.  i need help in this