Link to home
Start Free TrialLog in
Avatar of newjeep19
newjeep19Flag for United States of America

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: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>

Open in new window

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();
        }

Open in new window

Avatar of newjeep19
newjeep19
Flag of United States of America image

ASKER

Sorry Java Script code:
 <script type="text/javascript">
        function displayCalendar() {
            var datePicker = document.getElementById('datePicker');
            datePicker.style.display = 'block';
        }
    </script>

Open in new window

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?
Avatar of Bob Learned
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.

<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>

Open in new window


'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>

Open in new window

                   </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>

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>

Open in new window


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

Open in new window


That's it. That's what I use. See screenshot to see how it looks
cal.JPG
ASKER CERTIFIED SOLUTION
Avatar of newjeep19
newjeep19
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Found my own solution