ASP.Net DatePicker using Calendar Control


This article is written by Pon Saravanan  on 30-Jul-10 Last modified on :30-Jul-10





ASP.Net Calendar with JavaScript as a DatePicker

Is there a DatePicker control in the ASP.Net 2.0? No, so I started writing some code which will be similar to the Win Forms DatePicker. The best approach is to build a server control or al least a user control. This article describes how to use JavaScript to get this functionality so that later on this can be ported to a user control.

Controls required for a DatePicker

I have planned to use a textbox to accept the dates, calendar to select dates, a panel to contain the calendar and a button to show, or hide the calendar control and its panel. I preferred to use the html button and div as a panel.

JavaScript Functionalities

This DatePicker is designed with the aim of improving the usability in to consideration. Still there are various functionalities can be added but for explaining the core working functionalities without making too much of confusions, I have opted only the following functionalities.

Button Onclick: if the calendar is visible hide it. If the calendar is not visible then make it visible using Display attribute of Style.
Hide after show: the calendar will be invisible after 5 seconds using javascript TimeOut.
Textbox On Focus: Once the text box got focus the calendar will be shown

ASP.Net Calendar

Since we are using ASP.Net I decided to use the built in calendar control for the DatePicker. So I don’t need to worry about the Viewstate and the date rendering logic. And I can style the calendar as much as other .Net controls.

ASP.Net Calendar Styling

Though the native calendar is loaded with lots of functionalities,   the default display is not appealing and few considerations the styling is necessary. So styling calendar in such a way that the required details are displayed properly, I have used the following styles to display ok(at least to me)

DayStyle: the style of days displayed on the calendar
OtherMonthDayStyle: the days which are NOT in the current month
TitleStyle: the title of the control like in month and year.

Screen Capture


Source Code 

Mark-up(*.ASPX)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
    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></title>
    <script type="text/javascript">
        function ToggleCalendar()
        {
            var pnlCalendar = self.document.getElementById('pnlCalendar');
            if (pnlCalendar.style.display == 'none')
            {
                ShowHideCalendar(true);
            }
            else
            {
                ShowHideCalendar(false);
            }
        }
        function ShowHideCalendar(CanShow)
        {
            var pnlCalendar = self.document.getElementById('pnlCalendar');
            if (CanShow==true)
            {
                pnlCalendar.style.display = "block";
                var t = setTimeout("ShowHideCalendar(false)", 5000);
            }
            else
            {
                pnlCalendar.style.display = "none";
            }
       
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtDate"
        onfocus="ShowHideCalendar(true)"></asp:TextBox>
       
        <button onclick="ToggleCalendar()">...
        </button>
        <div id="pnlCalendar" style="display:none">
            <asp:Calendar runat="server" ID="clrDate"     >
             <DayHeaderStyle Font-Size="X-Small" />
                <DayStyle Font-Size="X-Small" />
                <OtherMonthDayStyle ForeColor="GrayText" />
                <TitleStyle Font-Size="X-Small"  Font-Bold="true"
                    BackColor="Silver" />
            </asp:Calendar>
        </div>
    </div>
    </form>
</body>
</html>

Code-Behind(*.ASPX.VB)

No codes required in code behind

 











Comments
  • GUEST
    include in this post ajax inserting from Calendar on SelectedDate 8/24/2010 9:43:17 AM

  • GUEST
    There is Free Asp.net datepicker available online.

    That i want to Share

    please check following link to view demo and download.

    http://worldcode.brinkster.net/Dot_Net_Tools/Calender.aspx
    12/9/2010 5:14:07 AM

  • GUEST
    9/16/2011 9:22:55 AM


Comments
   
Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    



Spam Bot Trap



   



Select Theme
White
Blue
Brown
Gray