Wednesday, July 31, 2013

Easy Date Picker for asp.net


Referred URL:



Step 1 - Add a Web user control (.ascx) and Web page (.aspx)

Step 2 - User Control ascx Code 
<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="CalendarControl.ascx.cs" Inherits="LegalReqForm.CalendarControl" %>
   <table class="ms-pmstable">
            <tr>
                <td>
                    <asp:TextBox id="TXT_DatePicker" runat="server" Width="100px" />
                    <input type="button" value="..." onclick="OnClick()" />
                    <asp:comparevalidator id="DatePickerValidator" runat="server" ControlToValidate="TXT_DatePicker" Type="Date" Operator="DataTypeCheck" ErrorMessage= " - * Enter a valid date." Enabled="true" />
                </td>
            </tr>
        </table>
<div id="divCalendar" style="DISPLAY: none; POSITION: absolute">
  <asp:Calendar id="Calendar1" runat="server" BorderWidth="2px" BackColor="White" Width="200px" ForeColor="Black" Height="180px" Font-Size="8pt" Font-Names="Verdana" BorderColor="#999999"
    BorderStyle="Outset" DayNameFormat="FirstLetter" CellPadding="4" onselectionchanged="Calendar1_SelectionChanged">
    <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC" />
    <SelectorStyle BackColor="#CCCCCC" />
    <NextPrevStyle VerticalAlign="Bottom" />
    <DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC" />
    <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666" />
    <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999" />
    <WeekendDayStyle BackColor="#FFFFCC" />
    <OtherMonthDayStyle ForeColor="#808080" />
  </asp:Calendar>
</div>

<script type="text/javascript">
function OnClick()
{
  if( divCalendar.style.display == "none")
    divCalendar.style.display = "";
  else
    divCalendar.style.display = "none";
}
</script>


Step 3 - User Control Code behind
private void  Calendar1_SelectionChanged(System.Object sender, System.EventArgs e)
{
                    //Dispaly in text box
            TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();

            //Adds in public variable for accessing outside
            DateSelected = Calendar1.SelectedDate.ToShortDateString();

            //Find calender control and hide
            Control divval = (Control)Page.FindControl("divCalendar");
            if (divval is HtmlGenericControl)
            {
                ((HtmlGenericControl)divval).Style.Add("display", "none");
            }
}

   public string TextBox1Value
        {
            get { return TextBox1.Text; }
        }


Step 4 - Using web control in ASPX Page Dynamically

//Load the control dynamically
protected void Page_Load(object sender, EventArgs e)
        {
            CalendarControl test = (CalendarControl)LoadControl("../CalendarControl.ascx");
            test.ID = "test";
            PNL_Container.Controls.Add(test);
        }

//Get the Date value to page control
protected void BTN_Submit_Click(object sender, EventArgs e)
        {
            CalendarControl ReqDate = (CalendarControl)PNL_Container.FindControl("test");
            TXT_ReqNo.Text = ReqDate.TextBox1Value;
        }

No comments: