Creating a Pop-up Date Picker : Calendar « ASP.net Controls « ASP.NET Tutorial






  1. ASP.NET Tutorial
  2. ASP.net Controls
  3. Calendar
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    protected void calEventDate_SelectionChanged(object sender, EventArgs e)
    {
        txtEventDate.Text = calEventDate.SelectedDate.ToString("d");
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblResult.Text = "You picked: " + txtEventDate.Text;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <script type="text/javascript">

        function displayCalendar()
        {
            var datePicker = document.getElementById('datePicker');
            datePicker.style.display = 'block';
        }

    </script>
    <style type="text/css">
        #datePicker
        {
            display:none;
            position:absolute;
            border:solid 2px black;
            background-color:white;
        }
        .content
        {
            width:400px;
            background-color:white;
            margin:auto;
            padding:10px;
        }
        html
        {
            background-color:silver;
        }
    </style>
    <title>Calendar with JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="content">

    <asp:Label
        id="lblEventDate"
        Text="Event Date:"
        AssociatedControlID="txtEventDate"
        Runat="server" />
    <asp:TextBox
        id="txtEventDate"
        Runat="server" />
    <img src="Calendar.gif" onclick="displayCalendar()" />

    <div id="datePicker">
    <asp:Calendar
        id="calEventDate"
        OnSelectionChanged="calEventDate_SelectionChanged"
        Runat="server" />
    </div>

    <br />
    <asp:Button
        id="btnSubmit"
        Text="Submit"
        Runat="server" OnClick="btnSubmit_Click" />

    <hr />

    <asp:Label
        id="lblResult"
        Runat="server" />

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








3.21.Calendar
3.21.1.Important properties of the Calendar control
3.21.2.Calendar style
3.21.3.Convert Selected Date from Calendar to Long Date String
3.21.4.title style, day header style, today style, and other month day style
3.21.5.Calendar with events
3.21.6.Calendar selection changed event (C#)
3.21.7.Format value retrieved from asp:Calendar (C#)
3.21.8.Format value from asp:Calendar as 'dddd, MMMM dd yyyy' (VB.net)
3.21.9.Calendar day renderer event (C#)
3.21.10.Appointment based on Calendar (C#)
3.21.11.Bind selected dates from a calendar to asp:BulletedList
3.21.12.Creating a Pop-up Date Picker
3.21.13.Retrieving a range of dates from a selection (C#)
3.21.14.Retrieving a range of dates from a selection (VB)
3.21.15.Controlling how a day is rendered in the Calendar (C#)
3.21.16.Controlling how a day is rendered in the Calendar (VB)
3.21.17.Calendar control and some of its colorful styles