ตัวอย่างผลลัพธิ์
ดาวน์โหลด jQuery UI ได้ที่เว็บไซต์ http://jqueryui.com/หรือดาวน์โหลดได้ที่ คลิกที่นี่
แตกไฟล์ jquery-ui-1.7.2.custom.zip โฟลเดอร์ที่นำไปใช้มี โฟลเดอร์ css และ js
การเรียกใช้งาน jQuery UI
1 2 3 4 5 6 7 8 9 | <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css"><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script><script type="text/javascript">$(function(){ // แทรกโค้ต jquery $("#dateInput").datepicker();});</script> |
CSS code กำหนดความกว้าง และขนาดตัวอักษรของ ปฏิทิน
1 2 3 4 5 6 7 8 | <style type="text/css">.ui-datepicker{ width:150px; font-family:tahoma; font-size:11px; text-align:center;}</style> |
HTML code text box สำหรับเลือกวันที่จากปฏิทิน
1 | <input type="text" name="dateInput" id="dateInput" /> |
เราสามารถกำหนดรูปแบบวันที่ได้ด้วยเพิ่ม option ดังตัวอย่าง ดังนี้
1 2 3 4 5 6 7 | <script type="text/javascript">$(function(){ // แทรกโค้ต jquery $("#dateInput").datepicker({ dateFormat: 'yy-mm-dd' }); // รูปแบบวันที่ที่ได้จะเป็น 2009-08-16});</script> |
Code แสดง 2 เดือน
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">$(function(){ // แทรกโค้ต jquery $("#dateInput").datepicker({ numberOfMonths: 2, showButtonPanel: true });});</script> |
กำหนดช่วงวันที่สามารถเลือกได้
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript">$(function(){ // แทรกโค้ต jquery $("#dateInput").datepicker({minDate: -20, maxDate: '+1M +10D'}); // minDate: -20 ไม่สามารถเลือกวันที่ ก่อน 20 วันก่อนหน้าได้ // maxDate: '+1M +10D' ไม่สามารถเลือก วันที่ถัดจาก อีก 1 เดือนและ 10 วัน ได้ // หากต้องการให้เลือกวันที่ได้เฉพาะวันปัจจุบันเป็นต้นไป // สามารถกำหนด เป็น $("#dateInput").datepicker({minDate: 0});});</script> |
