向文本控件添加日历弹出窗口

• 下载演示项目 - 32 Kb

引言

我回来了，带来了一个新的小型用户控件。几天前，一位客户问我是否可以给用户提供以下选择：在文本框中输入日期，或者双击文本框来调出日期选择器。因此，我制作了这个控件。这个控件可以将日期选择器添加到标签、文本框、HTML 输入框和 Div 中。它的作用是，当绑定到上述控件时，添加双击控件并弹出日期选择器的功能。你可以在页面上拥有任意数量的日期选择器，并且可以通过使用 VS 日历属性轻松更改控件的外观。要使用该控件，请使用解决方案资源管理器中的“添加现有项”将其添加到你的项目中。选择文件“Remember the close.jpg”。然后将控件拖动到你想要使用的页面上，并设置属性。

你必须在 DateSelector 控件上设置以下 3 个属性。

DateFormat="dd-MM-yyyy"。此属性设置你喜欢的日期格式，如果未设置，则默认为本地日期时间。

ParentControlId="TextBox1"。你想要绑定的控件的 ID。

PrevDate="true"。是否允许选择早于今天的日期。当此属性设置为 false 时，如果选择的日期早于今天，控件会将日期设置为今天的日期。

该 JavaScript 已在 Opera 8.0、Firefox 1.06 和 IE 6+ 中测试过。

提供的演示项目展示了控件的使用方法。

新内容

我已更新了该控件，因为它在父控件上使用了绝对定位。

现在它将根据鼠标位置打开日历，并且你可以将 close.jpg 放置在项目的任何位置。

// 程序员 Jan Nielsen

// Date: 02/08/2005
namespace LivingTest
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;
/// <summary>
/// Summary description for DateSelector.
/// </summary>
public class DateSelector : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Calendar Calendar1;
protected DirectoryInfo info;
private bool monthChanged = false;
private string cName;
private string cNameClientId;
private string controlId ;
private string dateFormat = DateTime.Now.ToString();
protected System.Web.UI.HtmlControls.HtmlImage IMG1;
private string imgUrl;
private bool prevDate = false;
private string Date;
private string top;
private string left;
private string imgPath = "";
private void Page_Load(object sender, System.EventArgs e)
{
controlId=this.ID+cName;
Calendar1.VisibleDate = DateTime.Today;
setImg();
}
// finds and set the closebutton image on popup
private void setImg()
{
DirectoryInfo i = new DirectoryInfo(Request.PhysicalApplicationPath);
getDir(i);
imgPath = imgPath.Replace(i.Root.ToString(),"");
imgPath = imgPath.Replace(@"\","/");
imgPath = imgPath.Remove(0,imgPath.IndexOf('/'));
imgUrl = imgPath + "/close.jpg";
}
// Dont know were you place your usercontrol so i look in all dirs on the website to find it
// returns the path of the close button 
private void getDir(DirectoryInfo inf)
{
foreach(DirectoryInfo i in inf.GetDirectories())
{
if(i.GetFiles("DateSelector.ascx").Length > 0)
imgPath = i.FullName;
if(i.GetDirectories().Length > -1)
getDir(i);
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Calendar1.VisibleMonthChanged += new System.Web.UI.WebControls.MonthChangedEventHandler(this.Calendar1_VisibleMonthChanged);
this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// Set Date format defaults to Local DateTimeFormat if not set
/// </summary>
public string DateFormat
{
set{dateFormat = value;}
get{return dateFormat;}
}
/// <summary>
/// navnet på den control hvor dato skal vises
/// </summary>
public string ParentControlId
{
set{cName = value;}
}
/// <summary>
/// returns the controlId to javascript a composite id so each datetime control gets a unik Id
/// set in pageload
/// </summary>
public string ControlId
{
get{return controlId;}
}
/// <summary>
/// Set the value for the close image
/// </summary>
public string ImgUrl
{
set{imgUrl = value;}
get{ return imgUrl;}
}
/// <summary>
/// allows or disallows to chose a date older than todays date
/// </summary>
public bool PrevDate
{
set{prevDate = value;}
}
/// <summary>
/// ensure that if we change month the control is still visible
/// </summary>
public void showDate()
{
if(monthChanged)
Response.Write("<script language="'javascript'">document.getElementById('"+controlId+"').style.visibility = 'visible';</script>");
}
/// <summary>
/// left position of the control
/// </summary>
public string posLeft
{
set{left = value;}
get{ return left;}
}
/// <summary>
/// right position of the control
/// </summary>
public string posTop
{
set{top = value;}
get{ return top;}
}
/// <summary>
/// get the TextControl used by javascript
/// </summary>
public string ControlClientId
{
get{ 
Object s = new Object();
s = (Object)this.Parent.FindControl(cName);
if(s.GetType() == typeof(Label))
{
cNameClientId = ((Label)s).ClientID;
}
if(s.GetType() == typeof(TextBox))
{
cNameClientId = ((TextBox)s).ClientID;
}
if(s.GetType() == typeof(HtmlInputText))
{
cNameClientId = ((HtmlInputText)s).ClientID;
}
if(s.GetType() == typeof(HtmlGenericControl))
{
cNameClientId = ((HtmlGenericControl)s).ClientID;
}
return cNameClientId;
}
}
 
/// <summary>
/// writes the selected date back to the ParentControl
/// </summary>
private string setDate 
{
set{
Object s = new Object();
s = (Object)this.Parent.FindControl(cName);
if(s.GetType() == typeof(Label))
{
((Label)s).Text = value;
cNameClientId = ((Label)s).ClientID;
}
if(s.GetType() == typeof(TextBox))
{
((TextBox)s).Text = value;
cNameClientId = ((TextBox)s).ClientID;
}
if(s.GetType() == typeof(HtmlInputText))
{
((HtmlInputText)s).Value = value;
cNameClientId = ((HtmlInputText)s).ClientID;
}
if(s.GetType() == typeof(HtmlGenericControl))
{
((HtmlGenericControl)s).InnerHtml = value;
cNameClientId = ((HtmlGenericControl)s).ClientID;
}
Date = value;
}
}
/// <summary>
/// just calling setDate with the selected value
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
monthChanged = false;
if(prevDate)
{
setDate = ((Calendar)sender).SelectedDate.ToString(dateFormat);
return;
}
if(((Calendar)sender).SelectedDate >= DateTime.Now )
{
setDate = ((Calendar)sender).SelectedDate.ToString(dateFormat);
}
else
{
setDate = DateTime.Now.ToString(dateFormat);
}
}
/// <summary>
/// set the value to monthChanged if changing months
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Calendar1_VisibleMonthChanged(object sender, System.Web.UI.WebControls.MonthChangedEventArgs e)
{
monthChanged = true;
}
}
}