提供一个不错的免费日历控件

此次控件是在作者: biojaye 制作的控件基础上修正了。

1、一个如果在编辑模式下字段为空的情况下，控件为出现错误后

2、选择完成后日历自动收缩

3、在字段为空的情况，TEXT里显示的为当前值

再进行发布的。

C#版本(为原如版本，请熟悉C#函数的人更改一下，我用的是VB.net，呵呵)：

GridView中的日期字段输入，实在是一个麻烦的事情，因为对一般的用户来讲，不知道输入日期的那种格式，如果日期的输入不是文本输入而是从日历控件中选择，那就要好多了.

这就要建一个自定义控件.

1.建立一个简单的自定义日期选择控件

在可视视窗下，放入一个TextBox,一个button,一个日历控件

pickdate.ascx的参考源代码:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="pickdate.ascx.cs" Inherits="pickdate" %>
 <asp:TextBox ID="TBDate" runat="server" Width="83px"></asp:TextBox><asp:Button
ID="Button1" runat="server" OnClick="Button1_Click" Text="▼" ToolTip="日期选择器"
Width="29px" />
<asp:Calendar ID="Calendar1" runat="server" Height="149px" OnSelectionChanged="Calendar1_SelectionChanged"
Width="157px" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" ShowGridLines="True" Visible="False" >
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>

在codeFile里设置必要的属性和事件处理

参考代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class pickdate : System.Web.UI.UserControl
{
private DateTime m_thisdate;//多余的

public DateTime thisdate
{
get {
if (TBDate.Text != string.Empty)
{
return DateTime.Parse(TBDate.Text);
}
else
{
return DateTime.Now.Date;
}

}
set {

TBDate.Text = value.Date.ToShortDateString(); //不需要判断value，因为一定为日期型
Calendar1.SelectedDate = value;
Calendar1.VisibleDate = value;
}
}

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{
TBDate.Text = Calendar1.SelectedDate.ToShortDateString(); ;
}
protected void Button1_Click(object sender, EventArgs e) //操纵日历的可视状态
{
Calendar1.Visible = !Calendar1.Visible;
if (Calendar1.Visible)
{
Button1.Text = "▲";
}
else
{
Button1.Text = "▼";
}
}
}

VB.net

pickdate.ascx的参考源代码:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="PickDate.ascx.vb" Inherits="UserControls_PickDate" %>
<asp:TextBox ID="TBDate" runat="server" Width="83px" Value='<%#ToDay.ToString("yyyy-MM-dd") %>'></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_click" Text="▼" ToolTip="日期选择器" Width="29px" />
<asp:Calendar ID="Calendar1" runat="server" Height="149px" OnSelectionChanged="Calendar1_SelectionChanged" Width="157px" BackColor="#FFFFCC" BorderColor="#FFCC66" Borderwidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" ShowGridLines="true" Visible="false" >
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold ="true" />
<SelectorStyle BackColor="#FFCC66" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="white" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="true" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold ="true" Font-Size="9pt" ForeColor="#FFFFCC" />

</asp:Calendar>

PickDate.ascx.vb

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Class UserControls_PickDate
Inherits System.Web.UI.UserControl

Public Property thisdate() As String
Get
If TBDate.Text <> String.Empty Then
Return DateTime.Parse(TBDate.Text)
Else
Return ("请选择日期")
'Return (DateTime.Now.Date)

End If
End Get

Set(ByVal value As String)
If value = System.DBNull.Value.ToString Then
TBDate.Text = String.Empty
Else
Calendar1.SelectedDate = CDate(value) '不需要判断Value,因为一定为日期型
Calendar1.VisibleDate = CDate(value)
TBDate.Text = CDate(value).Date.ToShortDateString

End If

End Set
End Property

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
TBDate.Text = Calendar1.SelectedDate.ToShortDateString
Calendar1.Visible = False
Button1.Text = "▼"
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Calendar1.Visible = Not Calendar1.Visible
If Calendar1.Visible = True Then
Button1.Text = "▲"
Else
Button1.Text = "▼"
End If

End Sub

End Class

2把要用这个控件的列转为模板,然后在Edit模板中放入这个控件，在源代码视图进行绑定（可视状态无法绑定，因为绑定的属性选项中不出现thisdate属性）

<EditItemTemplate>

<uc1:pickdate ID="Pickdate1" runat="server" thisdate='<%# Bind("begindate") %>' />

</EditItemTemplate>

一定要在引用页声明：<%@ Register TagPrefix="uc4" TagName="Pickdate" Src="../UserControls/PickDate.ascx" %>