Remember the Coolest DHTML Calendar that I linked to awhile back? The was already a PHP wrapper for it, so I decided since I've been creating a ton of Custom Controls in ASP.NET lately, I'd make a wrapper for ASP.NET. Note: The following is tailor made for me. You could probably cut and paste, but your Calendar path is probably different than mine. Even a bigger bonus: They just released version 1.0 and with it included a pretty sweet theme. They say it's for Mac people, but screw that! The theme makes the Calendar widget look that much cooler! If you want to still use the old CSS themes (ie Crap) just set the CssFile property.
namespace MSTK.Web.UI.WebControls
{
using System;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web;
using System.IO;
/// <summary>
/// <hr />
/// <h1>DatePicker Description</h1>
/// <para>
///
/// </para>
/// <hr />
/// <h1>Release history</h1>
/// <code>
/// DEVELOPER VERSION DATE DESCRIPTION
/// W.Tilton 1.0 3/22/2005 Initial Creation
/// </code>
/// <hr />
/// Creates a Date Picker Control which consists of a TextBox and a Image. Click on the image
/// and yahoo, a calendar comes up. Cross browser, easy to setup, and all the default values already plopped in so
/// you can basically just include it on the page.
/// </summary>
public class DatePicker : Control
{
#region Private Variables
private string _scriptPath = "~/Calendar/",
_cssFile = string.Empty, //"calendar-blue2.css",
_imageUrl = "~/Calendar/img.gif";
private TimeFormat _timeFormat = TimeFormat.TwentyFour;
private DateTimeFormat _dateTimeFormat = DateTimeFormat.DateTime;
private bool _showsTime = true;
/// <summary>
/// What time format do we want?
/// </summary>
public enum TimeFormat : byte
{
/// <summary>
/// Twelve Hours with AM PM
/// </summary>
Twelve,
/// <summary>
/// 24 Hour time
/// </summary>
TwentyFour
}
/// <summary>
/// The DateTimeFormat that we want to appear in our textbox.
/// </summary>
public enum DateTimeFormat : byte
{
/// <summary>
/// yyyy-MM-dd 24:mm
/// </summary>
DateTime,
/// <summary>
/// yyyy-MM-dd
/// </summary>
ShortDate,
/// <summary>
/// Day, Month Date, Year
/// Ex: Tuesday, March 22, 2005
/// </summary>
LongDate
};
#endregion
#region Properties
/// <summary>
/// Where does the javascript files reside
/// <code>datePicker.ScriptPath = "~/Path/";</code>
/// </summary>
public string ScriptPath
{
get { return ResolveUrl(this._scriptPath); }
set { this._scriptPath = value; }
}
/// <summary>
/// Location of the image that will show next to our textbox.
/// <code>datePicker.ImageUrl = "~/Path/Image.gif";</code>
/// </summary>
public string ImageUrl
{
get { return ResolveUrl(this._imageUrl); }
set { this._imageUrl = value; }
}
/// <summary>
/// The CSS file that we'd like to use to make our control pretty.
/// <code>datePicker.CssFile = "calendar-blue2.css";</code>
/// </summary>
public string CssFile
{
get { return this._cssFile; }
set { this._cssFile = value; }
}
/// <summary>
/// Controls if the time is shown on the calendar
/// </summary>
public bool ShowsTime
{
get { return this._showsTime; }
set { this._showsTime = value; }
}
/// <summary>
/// Text that appears in the TextBox
/// </summary>
public string Text
{
get
{
if(ViewState[this.UniqueID+"Text"]==null)
return string.Empty;
else
return ViewState[this.UniqueID+"Text"].ToString();
}
set
{
ViewState[this.UniqueID+"Text"] = value;
}
}
/// <summary>
/// Set the time format to what you need.
/// <code>datePicker.Format = DateTimeFormat.DateTime;</code>
/// </summary>
public DateTimeFormat Format
{
set { this._dateTimeFormat = value; }
get { return this._dateTimeFormat; }
}
private string GetDateTimeFormat()
{
switch(this._dateTimeFormat)
{
case DateTimeFormat.DateTime:
return "%Y-%m-%d %H:%M";
case DateTimeFormat.ShortDate:
return "%Y-%m-%d";
case DateTimeFormat.LongDate:
return "%A, %B %e, %Y";
default:
return "%Y-%m-%d %H:%M";
}
}
private string GetTimeFormat()
{
switch(this._timeFormat)
{
case TimeFormat.Twelve:
return "12";
default:
return "24";
}
}
#endregion
#region Constructor
/// <summary>
/// Creates a textbox and a image. Click on the image and a cross browser calendar appears that allows you to visually choose a date.
/// </summary>
public DatePicker() : base() {}
#endregion
#region Overridden Methods
/// <summary>
/// Render the DatePicker control
/// </summary>
/// <param name="writer"></param>
override protected void Render(HtmlTextWriter writer)
{
StringBuilder calScript = new StringBuilder("<script type=\"text/javascript\">");
calScript.Append("Calendar.setup({").Append(
"inputField : \"").Append(this.UniqueID.Replace("$","_").Replace(":","_")).Append("\",").Append(
"ifFormat : \"").Append(this.GetDateTimeFormat()).Append("\",").Append(
"button : \"" + "btn" + this.UniqueID.Replace("$","_").Replace(":","_")).Append("\",").Append(
"showsTime : ").Append(this.ShowsTime.ToString().ToLower()).Append(",").Append(
"timeFormat : \"").Append(this.GetTimeFormat()).Append("\"").Append(
"});").Append(
"</script>");
Page.RegisterStartupScript(this.UniqueID,calScript.ToString()); // Crap out the script for each DatePicker control
TextBox txt = new TextBox();
txt.ID = this.UniqueID.Replace("$","_").Replace(":","_");
txt.Text = this.Text;
txt.Style.Add("margin-right","5px"); // Gives the image on the right a bit of room (doesn't look so cluttered)
txt.RenderControl(writer);
System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
image.ImageUrl = this.ImageUrl;
image.ID = "btn" + this.UniqueID.Replace("$","_").Replace(":","_");
image.RenderControl(writer);
}
/// <summary>
/// Include the main javascript files and initialize this component.
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
this.RegisterCommonScripts();
base.OnPreRender(e);
}
#endregion
#region Private Methods
private void RegisterCommonScripts()
{
if (!this.Page.IsClientScriptBlockRegistered("MSTK.Web.UI.WebControls.DatePicker"))
{
StringBuilder script = new StringBuilder();
if(this.CssFile.Equals(""))
{
script.Append("<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"").Append(this.ScriptPath).Append("skins/aqua/theme.css\" title=\"Aqua\" />");
}
else
{
script.Append("<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"").Append(this.ScriptPath).Append(this.CssFile).Append("\" />");
}
script.Append("<script type=\"text/javascript\" src=\"").Append(this.ScriptPath).Append("calendar.js\"></script>");
script.Append("<script type=\"text/javascript\" src=\"").Append(this.ScriptPath).Append("lang/calendar-en.js\"></script>");
script.Append("<script type=\"text/javascript\" src=\"").Append(this.ScriptPath).Append("calendar-setup.js\"></script>");
this.Page.RegisterClientScriptBlock("MSTK.Web.UI.WebControls.DatePicker", script.ToString());
}
}
#endregion
}
}
Now to place the control on our screen. Put this in the header:
<%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %>
<%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %>
and then
<ui:DatePicker runat="server" id="dp" />
<ui:DatePicker runat="server" ShowsTime="False" Format="ShortDate" id="dp2" />
Ker-Chunk, a nice date picker for your users.<%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %><%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %><%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %><%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %><%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %><%@ Register TagPrefix="ui" Namespace="MSTK.Web.UI.WebControls" Assembly="MSTK.Web.UI" %>