Thursday, October 11, 2012

How to Binding a Calendar Control in a Text box ASP.NET

How to Binding a Calendar Control in a Text box ASP.NET

First u create .Aspx or view page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Eco Friend & Co. - Time Tracker - Select Date</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="Microsoft Visual Studio, see http://msdn.microsoft.com/vstudio/" />
    <meta name="Description" content="Select a date" />
    <meta name="copyright" content="Copyright (c) 2011 Eco Friend & Company. All rights reserved." />
</head>
<body>
    <form id="form1" runat="server">
        <div id="calbg">
            <div id="calcontent">
                <fieldset>
                    <legend>SeleSelect a date: </legend>
                    <asp:DropDownList ID="MonthSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="MonthSelect_SelectedIndexChanged"></asp:DropDownList>
                    &nbsp;
                    <asp:DropDownList ID="YearSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="YearSelect_SelectedIndexChanged">
                    </asp:DropDownList>
                    <asp:Calendar ID="Cal" runat="server" ShowTitle="False" ShowNextPrevMonth="False"
                         DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Sunday" OnSelectionChanged="Cal_SelectionChanged">
                        <TodayDayStyle Font-Bold="True" ForeColor="White" BackColor="#990000"></TodayDayStyle>
                        <DayStyle BorderWidth="2px" ForeColor="#666666" BorderStyle="Solid" BorderColor="White"
                            BackColor="#EAEAEA"></DayStyle>
                        <DayHeaderStyle ForeColor="#649CBA"></DayHeaderStyle>
                        <SelectedDayStyle Font-Bold="True" ForeColor="#333333" BackColor="#FAAD50"></SelectedDayStyle>
                        <WeekendDayStyle ForeColor="White" BackColor="#BBBBBB"></WeekendDayStyle>
                        <OtherMonthDayStyle ForeColor="#666666" BackColor="White"></OtherMonthDayStyle>
                    </asp:Calendar>
                    <br />
                    <table>
                        <tr>
                            <td valign="middle" colspan="2">
                                Date Selected:
                                <asp:Label ID="lblDate" runat="server">
                                </asp:Label>
                                <input id="datechosen" type="hidden" name="datechosen" runat="server">
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle">
                                <asp:Button ID="OKButton" runat="server" Text="OK" />
                             </td>
                            <td valign="middle">
                                <asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClientClick="javascript:self.close()"/>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </div>
        </div>
    </form>
</body>
</html>

then Aspx.cs design 


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Calendar : System.Web.UI.Page
{
    public string controlToEdit;
    public string isPostBack;

    public Calendar()
    {
        LoadComplete += new EventHandler(Page_LoadComplete);
    }
    void Page_Load(object sender, EventArgs e)
    {
     
        if (!Page.IsPostBack)
        {
            controlToEdit = Request.QueryString["controlID"];
            Session.Add("controlToEdit", controlToEdit);
            isPostBack = Request.QueryString["isPostBack"];
            Session.Add("isPostBack", isPostBack);


            // Cast first day of the week from web.config file.  Set it to the calendar
            //Cal.FirstDayOfWeek = (System.Web.UI.WebControls.FirstDayOfWeek)Convert.ToInt32(ConfigurationManager.AppSettings["FirstDayOfWeek"]);

            // Select the Correct date for Calendar from query string
            // If fails, pick the current date on Calendar
            try
            {
                Cal.SelectedDate = Cal.VisibleDate = Convert.ToDateTime(lblDate.Text);
            }
            catch
            {
                Cal.SelectedDate = Cal.VisibleDate = DateTime.Today;
            }
            // Fills in correct values for the dropdown menus
            FillCalendarChoices();
            SelectCorrectValues();
        }
        else
        {
            if (Session["controlToEdit"] != null)
                controlToEdit = (string)Session["controlToEdit"];
            if (Session["isPostBack"] != null)
                isPostBack = (string)Session["isPostBack"];
        }
    }
    void Page_LoadComplete(object sender, System.EventArgs e)
    {
        OKButton.OnClientClick = "javascript:window.opener.SetControlValue('" + this.controlToEdit + "','" + lblDate.Text + "','" + this.isPostBack + "');";
    }

    protected void FillCalendarChoices()
    {
        DateTime thisdate = (DateTime.Now).AddYears(5);

        // Fills in month values
        for (int x = 0; x < 12; x++)
        {
            // Loops through 12 months of the year and fills in each month value
            ListItem li = new ListItem(thisdate.ToString("MMMM"), thisdate.Month.ToString());
            MonthSelect.Items.Add(li);
            //to add next next month name to the monthselect drop downlist control like aug then sept and so on....
            thisdate = thisdate.AddMonths(1);
        }

        // Fills in year values and change y value to other years if necessary
        for (int y = 2000; y <= thisdate.Year; y++)
        {
            YearSelect.Items.Add(y.ToString());
        }
     
    }

    protected void SelectCorrectValues()
    {
        lblDate.Text = Cal.SelectedDate.ToShortDateString();
        datechosen.Value = lblDate.Text;
        MonthSelect.SelectedIndex = MonthSelect.Items.IndexOf(MonthSelect.Items.FindByValue(Cal.SelectedDate.Month.ToString()));
        YearSelect.SelectedIndex = YearSelect.Items.IndexOf(YearSelect.Items.FindByValue(Cal.SelectedDate.Year.ToString()));
    }

    protected void Cal_SelectionChanged(object sender, System.EventArgs e)
    {
        Cal.VisibleDate = Cal.SelectedDate;
        SelectCorrectValues();
    }

    protected void MonthSelect_SelectedIndexChanged(object sender, System.EventArgs e)
    {
        Cal.SelectedDate = Cal.VisibleDate
            = new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
                           Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
        SelectCorrectValues();
    }

    protected void YearSelect_SelectedIndexChanged(object sender, System.EventArgs e)
    {
        Cal.SelectedDate = Cal.VisibleDate
            = new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
                           Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
        SelectCorrectValues();
     
    }
 
}


and call and other page
create only aspx page not need and code of it.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="javascript/script.js">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
         <a href="javascript:OpenPopupPage('Calendar.aspx','<%= txtDate.ClientID %>','<%= Page.IsPostBack %>');">
                    <img src="images/icon-calendar.gif" /></a>
    </div>
    </form>
</body>
</html>


No comments:

Post a Comment