Find the javascript at http://www.dynarch.com/projects/calendar/ change your scriptPath and imageUrl and you're set.
namespace MSTK.Web.UI.WebControls
{
using System;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Configuration;
using System.Text;
using System.Resources;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
/// <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>
[
Designer(typeof(MSTK.Web.UI.WebControls.DatePicker)),
ValidationProperty("Text"),
]
public class DatePicker : WebControl, INamingContainer
{
#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
};
/// <summary></summary>
private TextBox txt = new TextBox();
private System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
private WebControl container;
#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>
/// Gets or sets the text content of the text box
/// </summary>
[
Description("Gets or sets the text content of the text box"),
Category("Appearance"),
Bindable(true),
DefaultValue("")
]
public string Text
{
get {
this.EnsureChildControls();
if ( txt.Text == null ) {
return String.Empty;
}
return txt.Text;
}
set {
this.EnsureChildControls();
txt.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>
/// Overrides the LoadViewState method.
/// </summary>
protected override void LoadViewState(object savedState)
{
base.LoadViewState(savedState);
if ( this.ViewState["-1Saved"] != null && (Boolean)this.ViewState["-1Saved"] )
{ // not really sure why I have to do this
this.Text = string.Empty;
}
}
/// <summary>
/// Overrides the CreateChildControls method.
/// </summary>
protected override void CreateChildControls()
{
container = new WebControl();
container.ID = "Container";
this.Controls.Add(container);
txt.ID = this.UniqueID.Replace("$","_").Replace(":","_");
txt.Style.Add("margin-right","5px"); // Gives the image on the right a bit of room (doesn't look so cluttered)
container.Controls.Add(txt);
image.ImageUrl = this.ImageUrl;
image.ID = "btn" + this.UniqueID.Replace("$","_").Replace(":","_");
container.Controls.Add(image);
}
/// <summary>
/// Render the DatePicker control
/// </summary>
/// <param name="writer"></param>
override protected void Render(HtmlTextWriter writer)
{
this.EnsureChildControls();
StringBuilder calScript = new StringBuilder("<script type=\"text/javascript\">");
calScript.Append("Calendar.setup({").Append(
"inputField : \"").Append(txt.UniqueID.Replace("$","_").Replace(":","_")).Append("\",").Append(
"ifFormat : \"").Append(this.GetDateTimeFormat()).Append("\",").Append(
"button : \"" + image.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
container.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 Designer Support
/// <summary>
/// The text area of the DatePicker.
/// </summary>
/// <remarks>This is used by the designer.</remarks>
protected internal TextBox TextControl
{
get
{
EnsureChildControls();
return txt;
}
}
/// <summary>
/// The container control of ComboBox's controls.
/// </summary>
/// <remarks>
/// This is used by the designer.
/// </remarks>
protected internal WebControl ContainerControl
{
get
{
EnsureChildControls();
return container;
}
}
#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
}
}