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

An article by admin    8 Comments

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

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

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

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

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

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

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

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

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

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

8. เลือก Excentrics World Controls

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

ใช้งาน CalendarPopup (Design)

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

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

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

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

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

ใช้งาน CalendarPopup (Coding)

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

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

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

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

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

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

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

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

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