[ASP.net+VB] การสร้าง Pop-up Calendar

วันนี้จะทำ Pop Up Calendar แบบนี้

aspnet-popupcalendar-10

เมื่อคลิกที่ปุ่ม ก็จะโชว์ปฏิทิน แบบนี้

aspnet-popupcalendar-11

เตรียมพร้อมก่อนใช้งาน

1. ก่อนอื่น ต้องดาวโหลด Control Set จากเว็บนี้  eworldui.net เมื่อดาวโหลดมาเสร็จแล้วก็ install โลดดดดดดด

    aspnet-popupcalendar-01

2. เมื่อ install เสร็จแล้วก็เปิด Visual Studio ขึ้นมา มองไปที่ toolbox แล้ว คลิกขวา เลือก Add Tab เพื่อสร้าง Tab สำหรับเก็บ Control ของ eWorldUI (จะไม่ Add Tab ก็ได้นะ แต่ทำไว้เพื่อความสะดวกในการใช้งานในครั้งต่อๆ ไป)

    aspnet-popupcalendar-02

3. พิมพ์ชื่อ Tab ว่า  eWorldUI

    aspnet-popupcalendar-03

4. เลือก Tab eWorldUI แล้วคลิกขวา Choose Items

    aspnet-popupcalendar-04

5. เลือก Items ที่มี Namespac ว่า eWorld.UI ทั้งหมด (คลิก Namespace ก็ได้เพื่อให้เรียงตามตัวอักษร) จากนั้นกด OK

    aspnet-popupcalendar-05

6. จะเห็นว่าที่ Toolbox ของเราจะมีเพิ่มขึ้นมามากมาย (แต่ในที่นี้จะแนะนำแค่ CalendarPopup อย่างเดียว อิอิ)

    aspnet-popupcalendar-06

7. ต่อมา ไปที่ Solution Explorer คลิกขวาที่ชื่อ Project จากนั้นเลือก Add Reference

    aspnet-popupcalendar-07

8. เลือก Excentrics World Controls

    aspnet-popupcalendar-08

9. แค่นี้ก็พร้อมใช้งานแล้ว


    ใช้งาน CalendarPopup (Design)

    1. ลาก CalendarPopup มาจาก Toolbox จะได้ดังนี้

      aspnet-popupcalendar-09

    2. ลอง Run ดูจะได้แบบนี้

      aspnet-popupcalendar-10

    3. ลองคลิกที่ปุ่ม … จะได้แบบนี้

      aspnet-popupcalendar-11

    4. โอ้ววว เสร็จแล้ว pop up calendar ที่ต้องการ

      (ไม่ต้องเขียนเองให้เมื่อยตุ้ม…)


      ใช้งาน CalendarPopup (Coding)

      หลังจากมี Design ของ CalendarPopup แล้ว ต่อมาเราก็จะมาเขียนโค้ดเพื่อนำไปใช้งาน


      เป้าหมายคือ เมื่อเลือกวันที่เสร็จแล้ว กด OK ให้โชว์วันที่ที่เลือกไว้ (ง่ายๆ ก่อน)

      1. หน้า Design เพิ่มเติมนิดหน่อยแบบนี้

        aspnet-popupcalendar-12

      2. Double Click ที่ปุ่ม OK เพื่อเขียนโค้ด

        Dim myDate As Date
        myDate = CalendarPopup1.SelectedDate
        lblDate.Text = myDate.ToString()

      3. ลอง Run ดู จะได้แบบนี้

        aspnet-popupcalendar-13

      ไม่เพียงแค่โชว์ Date ได้เท่านั้น ลอง CalendarPopup1.SelectedDate แล้วจุด ดูจะขึ้น Property มา สามารถเลือกได้ทั้ง Day, Month, Year, DayOfWeak เป็นต้น

      ลองเล่นดูเพิ่มเติม และแล้ววันนี้ก็สร้าง Pop Up Calendar ได้ตามความต้องการ

      ต้องขอบคุณพี่ดิว สำหรับคำแนะนำ ^^”

      Categories Category: ASP.net+VB Tags Tags: , , ,

      6 Comments

      1. อามิน says:

        สุดยอดไปเลยพี่กำลังหาพอดี

      2. mashimsu says:

        OH!!!!!!! My Goddddddd
        ขอบคุณครับ ผมหามาทั้งชีวิตเลย

      3. intisen says:

        ทำไมเวลาเราต้องการ
        แก้ไขมัน
        ตรง Monify Popup style มันเออเรอว่า

        Object reference not set to an instance of an object.

        อะครับ
        ตอบหน่อย

      4. admin says:

        ไม่เข้าใจคำถามค่ะ มัน error ตอนไหนยังไงนะคะ

      5. puy says:

        ขอบคุณมาก ๆคะ ที่หั้ยความรู้ มันดีที่สูดเลยคะ คุงจิงคะ

      6. P_P says:

        อยากทราบค่ะ ถ้าต้องการให้ calendar โชว์วันที่อย่างเดียว ไม่ต้องโชว์เวลา 00:00:00 จะทำยังไงค่ะ ช่วย

        ตอบด้วยนะค่ะ

      Leave a Reply

      Your email address will not be published. Required fields are marked *

      *

      You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>