newjeep19
asked on
How to add a datePicker to a ASP.NET Gridview
I need to be able to add a datepicker calandar to my gridview when the user clicks on the image a calandar popups via javascript and then inserts the date selected in the same row as the textbox and calandar image is. The issue that I have is when the user clicks on the calandar image and selects the date the date is inseted in the first textbox in the first row of the grid and not the textbox of the row that the image calanadar was clicked. In my code below i have the asp.net code wired up to have the popup for one textbox and calamdar and the other just a calandar control. The date that just has the calandar control works great the pop-up dose not. pleas help.
ASP.NET and JavaScript code:
ASP.NET and JavaScript code:
<asp:TemplateField HeaderText="Est. Ship Date">
<ItemTemplate>
<asp:TextBox ID="txtEstShipDate" runat="server" Text='<%# Eval("Gtri_EstShipDate").ToString() %>'/>
<img src="images/calendar.png" alt="" onclick="displayCalendar()" />
<div id="datePicker">
<asp:Calendar ID="Cal1" runat="Server" OnSelectionChanged="Cal1_SelectionChanged" ></asp:Calendar>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Actual Ship Date">
<ItemTemplate>
<asp:TextBox ID="txtActualShipDate" runat="server" Text='<%# Eval("Gtri_ActualShipDate").ToString() %>' />
<%-- <img src="images/calendar.png" alt="" onclick="displayCalendar()" />--%>
<%-- <div id="datePicker"> --%>
<asp:Calendar ID="Cal2" runat="Server" OnSelectionChanged="Cal2_SelectionChanged"></asp:Calendar>
<%--</div>--%>
</ItemTemplate>
</asp:TemplateField>
C# code// Method: Calendar Pop-up
// Est. Shipping date
protected void Cal1_SelectionChanged(object sender, EventArgs e)
{
Calendar cal = (Calendar)sender;
TextBox text1 = (TextBox)((GridViewRow)cal.Parent.Parent).FindControl("txtEstShipDate");
text1.Text = cal.SelectedDate.ToShortDateString();
}
// Actual Ship date
protected void Cal2_SelectionChanged(object sender, EventArgs e)
{
Calendar cal = (Calendar)sender;
TextBox text2 = (TextBox)((GridViewRow)cal.Parent.Parent).FindControl("txtActualShipDate");
text2.Text = cal.SelectedDate.ToShortDateString();
}
ASKER
Sorry the example that you suggested does not work........looking at my code what am I not doing correctly? Like I stated before ...... the datePicker pop-up calandar control when the image is clicked on only inserts the date selected from the datePicker calandar in the first textbox in the gridview first row. An example of what I whant to happend is.....
EX:
In my grid I have 5 rows.......in the five rows there are two columns that have textboxes that are for dates to be entered into by selecting a a date from a datePicker . So, lets say that I am on the second row and I select the datePicker calandar popup in the second column for the date. I want the date that I selected to be inserted into that columns text box. What is happending now is when I select the datePicker calandar (which is an image) next too the textbox in the second row of the grid under the second column for dates to be entered into......the date selected does not get inserted in that text box.........the date is entered into the first rows textbox in the first column in my grid.......
When I have just a calandar control.....not a datePicker POPUP the date selected is inserted in the textbox next to the textbox ..............make sense?
EX:
In my grid I have 5 rows.......in the five rows there are two columns that have textboxes that are for dates to be entered into by selecting a a date from a datePicker . So, lets say that I am on the second row and I select the datePicker calandar popup in the second column for the date. I want the date that I selected to be inserted into that columns text box. What is happending now is when I select the datePicker calandar (which is an image) next too the textbox in the second row of the grid under the second column for dates to be entered into......the date selected does not get inserted in that text box.........the date is entered into the first rows textbox in the first column in my grid.......
When I have just a calandar control.....not a datePicker POPUP the date selected is inserted in the textbox next to the textbox ..............make sense?
Have you thought about the AJAX Control Toolkit, and the CalenderExtender control?
Here is the code I use and I am going to try to integrate them with your code but you can rearrange as you wish.
'At top of your page: I have bolded files you would need.
'The invoker
<asp:TemplateField HeaderText="Est. Ship Date">
<ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Actual Ship Date">
<ItemTemplate>
<asp:TextBox ID="txtActualShipDate" runat="server" Text='<%# Eval("Gtri_ActualShipDate" ).ToString () %>' />
<%-- <img src="images/calendar.png" alt="" onclick="displayCalendar() " />--%>
<%-- <div id="datePicker"> --%>
<asp:Calendar ID="Cal2" runat="Server" OnSelectionChanged="Cal2_S electionCh anged"></a sp:Calenda r>
<%--</div>--%>
</ItemTemplate>
</asp:TemplateField>
Save this file below as DatePicker.aspx
Finally, save this file as DatePicker.aspx.vb
That's it. That's what I use. See screenshot to see how it looks
cal.JPG
'At top of your page: I have bolded files you would need.
<script type="text/javascript">
/// <summary>
/// Launches the DatePicker page in a popup window,
/// passing a JavaScript reference to the field that we want to set.
/// </summary>
/// <param name="strField">String. The JavaScript reference to the field that we want to set, in the format: FormName.FieldName
/// Please note that JavaScript is case-sensitive.</param>
function calendarPicker(strField)
{
window.open('DatePicker.aspx?field=' + strField,'calendarPopup','width=250,height=190,resizable=yes,left=610,top=350');
}
</script>
'The invoker
<asp:TemplateField HeaderText="Est. Ship Date">
<ItemTemplate>
<asp:TextBox ID="txtEstShipDate" runat="server" Text='<%# Eval("Gtri_EstShipDate").ToString() %>'/>
<a href="javascript:;" onclick="calendarPicker('form1.txtEstShipDate');" title="Pick Date from Calendar"><img src="images/Calendar.png" border="0"></a>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderText="Actual Ship Date">
<ItemTemplate>
<asp:TextBox ID="txtActualShipDate" runat="server" Text='<%# Eval("Gtri_ActualShipDate"
<%-- <img src="images/calendar.png" alt="" onclick="displayCalendar()
<%-- <div id="datePicker"> --%>
<asp:Calendar ID="Cal2" runat="Server" OnSelectionChanged="Cal2_S
<%--</div>--%>
</ItemTemplate>
</asp:TemplateField>
Save this file below as DatePicker.aspx
<%@ Page Language="vb" AutoEventWireup="false" Inherits="UPS.DatePicker" CodeFile="DatePicker.aspx.vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Select Dates</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="VB">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 4px; PADDING-TOP: 0px }
BODY { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TABLE { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TR { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TD { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
</style>
</head>
<body onblur="/*this.window.focus();*/">
<form id="Form1" method="post" runat="server">
<asp:calendar id="Calendar1" runat="server" showgridlines="True" bordercolor="Black">
<todaydaystyle forecolor="White" backcolor="#FFCC66"></todaydaystyle>
<selectorstyle backcolor="#FFCC66"></selectorstyle>
<nextprevstyle font-size="9pt" forecolor="#FFFFCC"></nextprevstyle>
<dayheaderstyle height="1px" backcolor="#FFCC66"></dayheaderstyle>
<selecteddaystyle font-bold="True" backcolor="#CCCCFF"></selecteddaystyle>
<titlestyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000"></titlestyle>
<othermonthdaystyle forecolor="#CC9966"></othermonthdaystyle>
</asp:calendar>
</form>
</body>
</html>
Finally, save this file as DatePicker.aspx.vb
Imports System.Text
Namespace UPS
Partial Class DatePicker
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
' Protected WithEvents Calendar1 As System.Web.UI.WebControls.Calendar
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Nothing to do, here
End Sub
Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
'// Clear the link from this day
e.Cell.Controls.Clear()
'// Add the custom link
Dim Link As System.Web.UI.HtmlControls.HtmlGenericControl
Link = New System.Web.UI.HtmlControls.HtmlGenericControl
Link.TagName = "a"
Link.InnerText = e.Day.DayNumberText
Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value = '{1:d}'; window.close();", Request.QueryString("field"), e.Day.Date))
'// By default, this will highlight today's date.
If e.Day.IsSelected Then
Link.Attributes.Add("style", Me.Calendar1.SelectedDayStyle.ToString())
End If
'// Now add our custom link to the page
e.Cell.Controls.Add(Link)
End Sub
End Class
End Namespace
That's it. That's what I use. See screenshot to see how it looks
cal.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi check this question and solution. It may help you.
http://www.experts-exchang e.com/Prog ramming/La nguages/.N ET/ASP.NET /Q_2255626 4.html
http://www.experts-exchang
ASKER
Found my own solution
ASKER
Open in new window