AJAX กับการสร้างปฏิทินแบบ pickup เป็นการใช้ภาษา PHP กับ AJAX ร่วมกัน
ก่อนอื่นให้ดาวน์โหลดไฟล์ 3 ไฟล์ก่อนมี
1. jquery-ui-1.8.2.custom.css
2. jquery-1.4.2.min.js
3. jquery-ui-1.8.2.custom.min.js
และไฟล์ภาพ 1 โฟลเดอร์ คือ
1. images (ใส่ไว้ที่โฟลเดอร์เดียวกันกับ jquery-ui-1.8.2.custom.css นะครับ)
Code
<!-- ในส่วนของ head ต้องใส่ link ทั้ง 3 ไฟล์ เพื่อที่จะแสดงปฏิทิน-->
<!-- Start of JQuery -->
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js"></script>
<!-- End of JQuery -->
<!-- ในส่วนของ head ต้องใส่ javascript ที่จะแสดงปฏิทิน-->
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({
showOn: 'button', buttonImage: '../images/calendar-blue.gif',
dateFormat: 'dd-mm-yy'
});
$('#date').datepicker('option', 'monthNames',
['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม']
);
$('#date').datepicker('option', 'dayNamesMin',
['อา', 'จ.', 'อ.', 'พ.', 'พฤ', 'ศ.', 'ส.']
);
</script>
<!-- ในส่วนของ body ที่จะแสดงปฏิทิน-->
<table>
<tr>
<td><div align="right"><span class="style11">วันที่</span></div></td>
<td>:</td>
<td><label>
<div align="left">
<input type="text" name="Key_Date" id="date" />
</div>
</label></td>
</tr>
</table>