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>      
<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>  
<%-- <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" />   <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 :     
<%-- <asp:fileupload runat="server" ID="FileUpload1" CssClass="inline"></asp:fileupload>  --%>
<asp:FileUpload ID="FileUpload1" runat="server" />    
<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