Skip to main content

การใช้งาน Jquery Ui DatePicker

การสร้าง Form เพื่อรับข้อมูลจากผู้ใช้งาน ในกรณีที่ต้องมีการเก็บข้อมูลในรูปแบบวันที่ เพื่อความสะดวกในการกรอกข้อมูล เราจะมา แนะนำการใช้งาน Jquery Ui DatePicker ซึ่ง ช่วยสำหรับการแสดงผล ปฏิทิน และสามารถปรับแต่งรูปแบบการแสดงผลได้

สามารถศึกษาเพิ่มเติมได้ที่ http://jqueryui.com/datepicker/

ตัวอย่างการใช้งาน

datepicker1-300x263

1.การเรียกใช้งาน DatePicker สร้างไฟล์ datepicker.php

การใช้งาน JqueryUi DatePicker

2.ตัวอย่าง การกำหนด Event Onclick ใน Datepicker

ปรับแก้ในส่วนของ Javascript เพิ่ม Method onSelect ในส่วนของ datepicker function ในไฟล์ datepicker.php

3.ตัวอย่าง การแสดง highlight แถบสี วันที่ ใน DatePicker

datepicker2-300x260

3.1 สร้างไฟล์ event.php สร้างตัวแปร array เก็บค่าวันที่ แล้วแปลงค่าตัวแปรให้เป็นในรูปแบบ JSON ด้วย function json_encode

ตัวอย่างไฟล์ event.php

3.2 แก้ไขไฟล์ datepicker.php
เพิ่ม Code ในส่วนของ stylesheet เพื่อ กำหนดค่าการแสดงผลของวันที่

3.3 แก้ไขไฟล์ datepicker.php
เพิ่ม Code ในส่วนของ Javascript เพื่อดึงข้อมูลวันที่จาก ไฟล์ event.php มาแสดงผลใน DatePicker