พบกับบทความเกี่ยวกับคอมพิวเตอร์และ programming ได้ที่ http://articles.modoeye.com
ASP, ASP.NET Articles / DatePicker Web Server Control
Administrator
Sat 8 Jul 2006 10:42:24
ผมเจอปัญหาในการพัฒนาเว็บไซท์ที่ต้องการให้ผู้ใช้มีการเลือกวันที่ จึงได้ลองหาข้อมูลและพัฒนาเป็น 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 เสมอครับ
Best
Best
Tue 6 Feb 2007 02:44:31

ทำยังไงครับอยากทราบว่า จะใช้ code นี้ สำหรับ asp.net 2.0

ได้ป่าวครับ ถ้าได้ทำยังครับ admin ช่วยตอบด่วนนะครับต้องการด่วนครับจะเป็นพระคุณอย่างสูงมากกกกกกกกกกกกกกกกกกก

ขอบคุณครับ

ช่วย reply ทาง mail นะครับ

Administrator
Wed 7 Feb 2007 10:44:04
ใช้ .net Framework 2.0 ได้เลยครับ เนื่องจากทั้งหมดเป็น server control ทำให้ตอนเปลี่ยนค่าต่างๆจะมีการ submit ค่าด้วยครับ
Reply
Name:
E-mail:
Home | Services | Forum | Classified | Directories | Support | Contact
ATOM feed RSS 0.9 feed RSS 1.0 feed RSS 2.0 feed
Copyright © 2005 - 2007 Modoeye.com, All Rights Reserved.
Disclaimer | Privacy policy | Term of Use | Term of Services
Valid XHTML Valid CSS! PHP: Hypertext Preprocessor MySQL database Apache Powered! FreeBSD Power to serve
Modoeye Sitemap Client login