Monday 18 March 2013

how to crete datepicker or Example of Calender control in asp.net



                 


Description:-

  in this example we can create a datepicker when click on small image that are display inside of TextBox control. when click on small icon the datepicker is popup and when user select the date the date is automatically set to the TextBox and automatically hide.

Calender Control is a rich Control in asp.net. calender provides this type of facility are as follow
Ø  Displaying one month at a time
Ø  Selecting a day, a week or a month
Ø  Selecting a range of days
Ø  Moving from month to month
Ø  Controlling the display of the days programmatically

 Main Useful Property and Event of Calender Control:-
DayNameFormat : Gets or sets format of days of the week.
FirstDayOfWeek: Gets or sets the day of week to display in the first column.
SelectedDate: Gets or sets the selected date.
SelectionMode: Gets or sets the selection mode that specifies whether the user can select a single day, a week or an entire month.
TodaysDate: Gets or sets the value for today.s date.
NextPrevFormat: Gets or sets the format of the next and previous month navigation control

Event are as follows:-
SelectionChanged: It is raised when a day, a week or an entire month is selected
DayRender: It is raised when each data cell of the calendar control is rendered.
VisibleMonthChanged: It is raised when user changes a month
  

Default5.aspx:-

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

<!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">
<script type="text/javascript">

    function fun() {

        var s = document.getElementById("foo");
        if (s.style.display == 'none')
            s.style.display = 'block';
    }

</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 
        <asp:Label ID="Label1" runat="server" Text="name"></asp:Label>
 
    &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="bod"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><img src="cal.png" alt="ss" width="30" height="30" onclick="fun()" />
                
        <div id="foo" style="display:none; position:absolute; left:150px; top:90px; width:100px; height:100px" >
        <asp:Calendar ID="Calendar1"
            runat="server"  SelectionMode="DayWeekMonth"
                onselectionchanged="Calendar1_SelectionChanged" BackColor="#0066FF"
                onvisiblemonthchanged="Calendar1_VisibleMonthChanged">
            <DayStyle BackColor="#FF0066" />
            </asp:Calendar></div>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToValidate="TextBox2" ErrorMessage="only date is allowed."
            Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
        <br />
        <br />
        <asp:Label ID="Label3" runat="server" Text="photo"></asp:Label>
&nbsp;&nbsp;&nbsp;
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <br />
        <asp:Label ID="Label4" runat="server" Text="File"></asp:Label>
&nbsp;&nbsp;
        <asp:FileUpload ID="FileUpload2" runat="server" />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Add" />
&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" CausesValidation="False"
            onclick="Button2_Click" Text="cancel" />
 

    </form>
</body>
</html>





Default5.aspx.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.IO;

public partial class Default5 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string fileExtension = Path.GetExtension(FileUpload1.FileName.ToString());
        fileExtension.ToLower();
        if (fileExtension != ".gif" && fileExtension != ".jpg" && fileExtension != ".jpeg" && fileExtension != ".png")
        {
            ClientScript.RegisterClientScriptBlock(this.GetType(), "ke", "<script>alert('only jpeg,jpg,png,gif photo is allowed');</script>");
            return;
        }
        string file = Path.GetExtension(FileUpload2.FileName.ToString());
        fileExtension.ToLower();
        if (file != ".docx" && file != ".doc")
        {
            ClientScript.RegisterClientScriptBlock(this.GetType(), "ke", "<script>alert('only .Doc and .docx is allowed');</script>");
            return;
        }
        string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";
        string serverPath = Server.MapPath(@"~/images/" + FileUpload1.FileName);
        FileUpload1.SaveAs(serverPath);
        string serverPath1 = Server.MapPath(@"~/File/" + FileUpload2.FileName);
        FileUpload2.SaveAs(serverPath1);

        string q = "insert into bio values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + FileUpload1.FileName + "','" + FileUpload2.FileName + "')";
        SqlConnection conn = new SqlConnection(con);

        SqlCommand cmd = new SqlCommand(q, conn);
        conn.Open();
        int i = cmd.ExecuteNonQuery();
        if (i > 0)
        {
            Response.Redirect("~/Default4.aspx");
        }


    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/Default4.aspx");
    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        TextBox2.Text = Calendar1.SelectedDate.ToString("d");

    }
    protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
    {
        DateTime nextMonth = DateTime.Now.AddMonths(1);
        Calendar1.TodaysDate = nextMonth;
    }
}



0 comments:

Post a Comment