ผมเจอปัญหาในการพัฒนาเว็บไซท์ที่ต้องการให้ผู้ใช้มีการเลือกวันที่
จึงได้ลองหาข้อมูลและพัฒนาเป็น DatePicker Web Server Control
อย่างง่ายๆเพื่อใช้งานครับ
การสร้างก็เริ่มจากสร้าง Project ใหม่โดยเลือกเป็น web server control ตั้งชื่อ namespace ที่ต้องการ และใส่โค๊ดตามนี้ครับ
[DefaultProperty("Text")]
[ToolboxData("<{0}:DatePicker runat=server></{0}:DatePicker>")]
public class DatePicker : WebControl, INamingContainer
{
public TextBox txtDate = new TextBox();
public Calendar calDate = new Calendar();
public Button btnDate = new Button();
private DateTime m_MimimumDate = new DateTime();
public DateTime DateValue
{
get
{
try
{
DateTime val = DateTime.Parse(txtDate.Text);
return val;
}
catch (ArgumentNullException ex)
{
return DateTime.MinValue;
}
catch (FormatException ex)
{
return DateTime.MinValue;
}
}
set
{
if (value == DateTime.MinValue)
{
txtDate.Text = "";
}
else
{
txtDate.Text = value.ToString(DateFormatString);
}
}
}
public DateTime MinimumDate
{
get
{
try
{
return m_MimimumDate;
}
catch (ArgumentNullException ex)
{
return DateTime.MinValue;
}
catch (FormatException ex)
{
return DateTime.MinValue;
}
}
set
{
if (value != null)
{
m_MimimumDate = value;
}
else
{
m_MimimumDate = DateTime.MinValue;
}
}
}
public bool IsValid
{
get
{
try
{
if (txtDate.Text == "")
{
return true;
}
else
{
DateTime val = DateTime.Parse(txtDate.Text);
return true;
}
}
catch (ArgumentNullException ex)
{
return false;
}
catch (FormatException ex)
{
return false;
}
}
}
[Bindable(true)]
[Category("Behaviour")]
[DefaultValue("dd/MM/yy")]
[Localizable(true)]
public string DateFormatString
{
get
{
String s = (String)ViewState["DateFormatString"];
return ((s == null) ? "dd/MM/yy" : s);
}
set
{
ViewState["DateFormatString"] = value;
}
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("Select date")]
[Localizable(true)]
public string ExpandButtonLabel
{
get
{
String s = (String)ViewState["ExpandButtonLabel"];
return ((s == null) ? "+" : s);
}
set
{
ViewState["ExpandButtonLabel"] = value;
}
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("Close")]
[Localizable(true)]
public string CollapseButtonLabel
{
get
{
String s = (String)ViewState["CollapseButtonLabel"];
return ((s == null) ? "-" : s);
}
set
{
ViewState["CollapseButtonLabel"] = value;
}
}
protected override void CreateChildControls()
{
btnDate.Text = ExpandButtonLabel;
calDate.Visible = false;
calDate.BackColor = System.Drawing.Color.White;
calDate.BorderColor = System.Drawing.Color.FromArgb(10066329);
calDate.CellPadding = 2;
calDate.DayNameFormat = DayNameFormat.Shortest;
calDate.Font.Name = "Verdana";
calDate.Font.Size = FontUnit.Parse("8pt");
calDate.ForeColor = System.Drawing.Color.Black;
calDate.Height = new Unit(150, UnitType.Pixel);
calDate.Width = new Unit(180, UnitType.Pixel);
calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228);
calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt");
calDate.TitleStyle.Font.Bold = true;
calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204);
btnDate.Click += new System.EventHandler(btnDate_Click);
calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged);
Controls.Add(txtDate);
Controls.Add(calDate);
Controls.Add(btnDate);
base.CreateChildControls();
}
protected override void RenderContents(HtmlTextWriter output)
{
txtDate.RenderControl(output);
calDate.RenderControl(output);
btnDate.RenderControl(output);
}
protected void btnDate_Click(object sender, System.EventArgs e)
{
if (!calDate.Visible)
{
// expand the calendar
calDate.Visible = true;
txtDate.Visible = false;
btnDate.Text = CollapseButtonLabel;
if (DateValue != DateTime.MinValue)
{
calDate.SelectedDate = DateValue;
calDate.VisibleDate = DateValue;
}
}
else
{
// collapse the calendar
calDate.Visible = false;
txtDate.Visible = true;
btnDate.Text = ExpandButtonLabel;
}
}
protected void calDate_SelectionChanged(object sender, System.EventArgs e)
{
if (calDate.SelectedDate >= m_MimimumDate)
{
calDate.Visible = false;
txtDate.Visible = true;
btnDate.Text = ExpandButtonLabel;
txtDate.Text = calDate.SelectedDate.ToString(DateFormatString);
}
}
}
อธิบายโค๊ด
ใน Class นี้จะมี Member Control อยู่ 3 ส่วนครับคือ TextBox, Calendar, Button
Class จะทำงานตั้งแต่ OnLoad() เรื่อยมาจนถึง CreateChildControls() ซึ่งจะใช้ในการสร้างและตั้งค่า Member Control ภายใน Class ครับ โดยในตัว Calendar นั้นได้มีการ Handle Event OnSelectionChanged ไว้เมื่อ user ทำการคลิ๊กเลือกบน Calendar เมื่อไรจะมีการ Fire เหตุการณ์นี้ขึ้น ซึ่งเราจะใช้ในการ Assign ค่าให้กับ TextBox ครับ
เป็นการสร้าง DatePicker แบบง่ายๆครับ ซึ่งทั้งหมดนี้ใช้ Member เป็น Server Control ทั้งหมดซึ่งแน่นอนว่าเมื่อมีการเรียกใช้งานจะเกิด PostBack เสมอครับ
การสร้างก็เริ่มจากสร้าง Project ใหม่โดยเลือกเป็น web server control ตั้งชื่อ namespace ที่ต้องการ และใส่โค๊ดตามนี้ครับ
[DefaultProperty("Text")]
[ToolboxData("<{0}:DatePicker runat=server></{0}:DatePicker>")]
public class DatePicker : WebControl, INamingContainer
{
public TextBox txtDate = new TextBox();
public Calendar calDate = new Calendar();
public Button btnDate = new Button();
private DateTime m_MimimumDate = new DateTime();
public DateTime DateValue
{
get
{
try
{
DateTime val = DateTime.Parse(txtDate.Text);
return val;
}
catch (ArgumentNullException ex)
{
return DateTime.MinValue;
}
catch (FormatException ex)
{
return DateTime.MinValue;
}
}
set
{
if (value == DateTime.MinValue)
{
txtDate.Text = "";
}
else
{
txtDate.Text = value.ToString(DateFormatString);
}
}
}
public DateTime MinimumDate
{
get
{
try
{
return m_MimimumDate;
}
catch (ArgumentNullException ex)
{
return DateTime.MinValue;
}
catch (FormatException ex)
{
return DateTime.MinValue;
}
}
set
{
if (value != null)
{
m_MimimumDate = value;
}
else
{
m_MimimumDate = DateTime.MinValue;
}
}
}
public bool IsValid
{
get
{
try
{
if (txtDate.Text == "")
{
return true;
}
else
{
DateTime val = DateTime.Parse(txtDate.Text);
return true;
}
}
catch (ArgumentNullException ex)
{
return false;
}
catch (FormatException ex)
{
return false;
}
}
}
[Bindable(true)]
[Category("Behaviour")]
[DefaultValue("dd/MM/yy")]
[Localizable(true)]
public string DateFormatString
{
get
{
String s = (String)ViewState["DateFormatString"];
return ((s == null) ? "dd/MM/yy" : s);
}
set
{
ViewState["DateFormatString"] = value;
}
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("Select date")]
[Localizable(true)]
public string ExpandButtonLabel
{
get
{
String s = (String)ViewState["ExpandButtonLabel"];
return ((s == null) ? "+" : s);
}
set
{
ViewState["ExpandButtonLabel"] = value;
}
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("Close")]
[Localizable(true)]
public string CollapseButtonLabel
{
get
{
String s = (String)ViewState["CollapseButtonLabel"];
return ((s == null) ? "-" : s);
}
set
{
ViewState["CollapseButtonLabel"] = value;
}
}
protected override void CreateChildControls()
{
btnDate.Text = ExpandButtonLabel;
calDate.Visible = false;
calDate.BackColor = System.Drawing.Color.White;
calDate.BorderColor = System.Drawing.Color.FromArgb(10066329);
calDate.CellPadding = 2;
calDate.DayNameFormat = DayNameFormat.Shortest;
calDate.Font.Name = "Verdana";
calDate.Font.Size = FontUnit.Parse("8pt");
calDate.ForeColor = System.Drawing.Color.Black;
calDate.Height = new Unit(150, UnitType.Pixel);
calDate.Width = new Unit(180, UnitType.Pixel);
calDate.DayHeaderStyle.BackColor = System.Drawing.Color.FromArgb(228, 228, 228);
calDate.DayHeaderStyle.Font.Size = FontUnit.Parse("7pt");
calDate.TitleStyle.Font.Bold = true;
calDate.WeekendDayStyle.BackColor = System.Drawing.Color.FromArgb(255, 255, 204);
btnDate.Click += new System.EventHandler(btnDate_Click);
calDate.SelectionChanged += new System.EventHandler(calDate_SelectionChanged);
Controls.Add(txtDate);
Controls.Add(calDate);
Controls.Add(btnDate);
base.CreateChildControls();
}
protected override void RenderContents(HtmlTextWriter output)
{
txtDate.RenderControl(output);
calDate.RenderControl(output);
btnDate.RenderControl(output);
}
protected void btnDate_Click(object sender, System.EventArgs e)
{
if (!calDate.Visible)
{
// expand the calendar
calDate.Visible = true;
txtDate.Visible = false;
btnDate.Text = CollapseButtonLabel;
if (DateValue != DateTime.MinValue)
{
calDate.SelectedDate = DateValue;
calDate.VisibleDate = DateValue;
}
}
else
{
// collapse the calendar
calDate.Visible = false;
txtDate.Visible = true;
btnDate.Text = ExpandButtonLabel;
}
}
protected void calDate_SelectionChanged(object sender, System.EventArgs e)
{
if (calDate.SelectedDate >= m_MimimumDate)
{
calDate.Visible = false;
txtDate.Visible = true;
btnDate.Text = ExpandButtonLabel;
txtDate.Text = calDate.SelectedDate.ToString(DateFormatString);
}
}
}
อธิบายโค๊ด
ใน Class นี้จะมี Member Control อยู่ 3 ส่วนครับคือ TextBox, Calendar, Button
Class จะทำงานตั้งแต่ OnLoad() เรื่อยมาจนถึง CreateChildControls() ซึ่งจะใช้ในการสร้างและตั้งค่า Member Control ภายใน Class ครับ โดยในตัว Calendar นั้นได้มีการ Handle Event OnSelectionChanged ไว้เมื่อ user ทำการคลิ๊กเลือกบน Calendar เมื่อไรจะมีการ Fire เหตุการณ์นี้ขึ้น ซึ่งเราจะใช้ในการ Assign ค่าให้กับ TextBox ครับ
เป็นการสร้าง DatePicker แบบง่ายๆครับ ซึ่งทั้งหมดนี้ใช้ Member เป็น Server Control ทั้งหมดซึ่งแน่นอนว่าเมื่อมีการเรียกใช้งานจะเกิด PostBack เสมอครับ
Best

Tue 6 Feb 2007 02:44:31
Tue 6 Feb 2007 02:44:31
ทำยังไงครับอยากทราบว่า จะใช้ code นี้ สำหรับ asp.net 2.0
ได้ป่าวครับ ถ้าได้ทำยังครับ admin ช่วยตอบด่วนนะครับต้องการด่วนครับจะเป็นพระคุณอย่างสูงมากกกกกกกกกกกกกกกกกกก
ขอบคุณครับ
ช่วย reply ทาง mail นะครับ
ใช้ .net Framework 2.0 ได้เลยครับ เนื่องจากทั้งหมดเป็น server control ทำให้ตอนเปลี่ยนค่าต่างๆจะมีการ submit ค่าด้วยครับ

















