เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker

ดาวน์โหลด jQuery UI ได้ที่เว็บไซต์ http://jqueryui.com/หรือดาวน์โหลดได้ที่ คลิกที่นี่
แตกไฟล์ jquery-ui-1.7.2.custom.zip โฟลเดอร์ที่นำไปใช้มี โฟลเดอร์ css และ js
การเรียกใช้งาน jQuery UI

แสดงปกติพิมพ์โค้ดนี้?

1. "stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css">  
2. "text/javascript" src="js/jquery-1.3.2.min.js">  
3. "text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">  
4. "text/javascript">  
5. $(function(){  
6.     // แทรกโค้ต jquery  
7.     $("#dateInput").datepicker();  
8. });  
9.   

CSS code กำหนดความกว้าง และขนาดตัวอักษรของ ปฏิทิน

แสดงปกติพิมพ์โค้ดนี้?

1. "text/css">  
2. .ui-datepicker{  
3.     width:150px;  
4.     font-family:tahoma;  
5.     font-size:11px;  
6.     text-align:center;  
7. }  
8.   

HTML code text box สำหรับเลือกวันที่จากปฏิทิน

แสดงปกติพิมพ์โค้ดนี้?

1. <input type="text" name="dateInput" id="dateInput" />  

เราสามารถกำหนดรูปแบบวันที่ได้ด้วยเพิ่ม option ดังตัวอย่าง ดังนี้

แสดงปกติพิมพ์โค้ดนี้?

1. "text/javascript">  
2. $(function(){  
3.     // แทรกโค้ต jquery  
4.     $("#dateInput").datepicker({ dateFormat: 'yy-mm-dd' });  
5.     // รูปแบบวันที่ที่ได้จะเป็น 2009-08-16  
6. });  
7.   

Code แสดง 2 เดือน

แสดงปกติพิมพ์โค้ดนี้?

1. "text/javascript">  
2. $(function(){  
3.     // แทรกโค้ต jquery  
4.     $("#dateInput").datepicker({  
5.         numberOfMonths: 2,  
6.         showButtonPanel: true  
7.     });  
8. });  
9.   

กำหนดช่วงวันที่สามารถเลือกได้

แสดงปกติพิมพ์โค้ดนี้?

1. "text/javascript">  
2. $(function(){  
3.     // แทรกโค้ต jquery  
4.     $("#dateInput").datepicker({minDate: -20, maxDate: '+1M +10D'});  
5.     // minDate: -20 ไม่สามารถเลือกวันที่ ก่อน 20 วันก่อนหน้าได้  
6.     // maxDate: '+1M +10D' ไม่สามารถเลือก วันที่ถัดจาก อีก 1 เดือนและ 10 วัน ได้  
7.     // หากต้องการให้เลือกวันที่ได้เฉพาะวันปัจจุบันเป็นต้นไป  
8.     // สามารถกำหนด เป็น $("#dateInput").datepicker({minDate: 0});  
9. });  
10.