Tuesday, May 20, 2008

วิธีการใช้งาน 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>




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

1 comment:

Warin Wongniyom said...

พี่ครับ พอดีผมต้องการที่จะระบุ charset ให้มันใหม่
เพราะงานที่ผมทำ ผมกำหนดไว้เป็น utf-8
แล้วมันมองไม่เห็นภาษาไทยของพี่หนะครับ

พี่เข้าไปแก้ ตรงไหนหรอครับ

รบกวนด้วยนะครับ ขอบคุณครับ