DatePicker on ASP.NET 2.0

http://www.codeproject.com/KB/user-controls/DatePickerUserControl.aspx

Introduction

This is a simple date-picker control. The user can either enter a date into a text box or click on an icon that opens a pop-up calendar. JavaScript is used to display the pop-up calendar. The control can easily be integrated into your own ASP.NET websites.

Background

This control is based on another CodeProject article. I overworked the control so it compiles with Visual Studio 2005 and works with the latest versions of Firefox and Internet Explorer. I fixed some JavaScript errors and added better design-time support and data-binding.

Using the Code

The control consists of the main user control with the files Date.ascx and Date.ascx.cs and a directory cal that contains the JavaScript file, CSS definition and some images. To use the control in your own project, simply add the files Date.ascx and Date.ascx.cs, as well as the folder cal to your ASP.NET web project.

Once these resources are added to your project, just drag Date.ascx onto a web form in design mode. In design mode, the date-picker control will look as follows:

Programmatically, the currently selected date can be accessed as either a string or as a DateTime object:

// setting the currently selected date as a string

Date1.CalendarDateString = "05.12.2007";

// setting the currently selected date as a DateTime object

Date1.CalendarDate = DateTime.Now;

Both of these properties can also be used for data-binding.

Validation of Selected Date

Of course, it is possible to enter any text into the textbox (or set via the CalendarDateString property) that cannot be converted into a valid date. In this case, the CalendarDate property returns the value DateTime.MaxValue, which indicates an invalid date. The CalendarDateString property, however, still returns the text in the textbox.

You can also use client-side validation by using a RangeValidator object. In this case, set the Type property of RangeValidator to Date. The MinimumValue and MaximumValue properties must be set to strings representing the minimum and maximum date in the same format as is used by the date-picker control.

Customize Appearance

The visual appearance of the pop-up calendar is defined in CSS file popcalendar.css, which resides in the cal folder. Most styles have comments, so just try out and modify colors and font styles. To customize the style of the text box within the control, it is possible to set the CSS class of the text box with the following property:

// set CSS class of textbox

Date1.TextCssClass = "dateTextBox";

Per default the date format is dd.mm.yyyy, e.g. 31.12.2007. If you want to change this, e.g. to 12/31/2007, you have to change the value of the constant DateFormat, which is defined in the file Date.ascx.cs:

// date format used by the calendar control

private const string DateFormat = "dd.MM.yyyy";

History

• December, 2007 -- Original version posted

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

--Comment:

Add a style in the img, you could see a hand when the cursor on the img. style="cursor:hand"

转载于:https://www.cnblogs.com/s021368/articles/1327505.html