วิธีการใช้งาน date selector ด้วย PopCalendarXP เพื่อรองรับกับวันที่ MySQL

PopCalendarXP เป็นของฟรีอีกแล้วครับ ผมเอามาใช้กับโค้ด php ซึ่งเปลี่ยนให้เป็นภาษาไทยเรียบร้อยแล้ว เหลือแต่ปีที่ยังเป็นคริสศักราช อยู่ ทำเป็นปีไทยไม่เป็นแต่ก็พอใช้งานได้ครับ ใครสนใจรายละเอียดเพิ่มเติมก็เวปนี้เลย www.calendarxp.net/

วิธีใช้น่ะครับ

• unzip ไฟล์ออกมาแล้วไปวางในเวปpath ของ server เช่น ของผมวางไว้ที่
  C:\AppServ\www\date1\

• ในโฟลเดอร์ date1 ผมจะสร้างไว้ สองไฟล์ไว้ test น่ะครับคือ date01.php และ date02.php ซึ่งสองไฟล์นี้ก็ใช้ dreamweaver สร้างมาครับง่ายดีและจะมีโฟลเดอร์ PopCalendarXP ซึ่งเป็นไฟล์ที่ผมโหลดมาและแก้เป็นภาษาไทยเรียบร้อยแล้ว
• ลองรันตามนี้น่ะครับ http://localhost/date1/date01.php
• ซึ่งวิธีการ install ผมขอสรุปคร่าวๆดังนี้น่ะครับ

1. สร้าง form ขึ้นมาและสมมุติตั้งชื่อ form เป็น testform
2. สร้าง text field ขึ้นมาและสมมุติตั้งชื่อว่า dc
3. ให้นำโค้ดนี้วางไว้หลังคำสั่ง text field
   

   
   
      <a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.testform.dc);return false;" ><img class="PopcalTrigger" align="absmiddle" src="PopCalendarXP/calbtn.gif" width="34" height="22" border="0" alt=""></a> 
   
   

   
   
   

สังเกตในโค้ดตรง (document.testform.dc) จะเห็นว่า form_name.textfield_name จะต้องเหมือนกันกับที่เราตั้งไว้น่ะครับซึ่งหากเราต้องการใช้งาน selector หลายตัวใน form เดียวกันเราก็แค่เปลี่ยนเฉพาะชื่อ text field ให้ต่างกันก็พอครับซึ่งในโค้ด date01.php ผมจะใช้เป็น (document.testform.dc)และ (document.testform.dc1)เพื่อใช้ตัว selector สองตัว
4. ลืมขั้นตอนสุดท้ายก็ต้องเอาโค้ดข้างล่างนี้น่ะครับไปวางไว้ก่อนtag </body> นะครับ
   

   
   <!--  PopCalendar(tag name and id must match) Tags should not be enclosed in tags other than the html body tag. -->
   <iframe width=174 height=189 name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="PopCalendarXP/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;">
   </iframe>
   

   
   

ซึ่งเท่านี้เราก็จะได้การส่งค่าวันที่ไปเก็บลงในฐานข้อมูลแบบdefault ของMySQL เรียบร้อยครับ
โหลดโค้ดทั้งหมดได้ที่นี่ครับ date1.zip