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

ตัวอย่างผลลัพธิ์

แตกไฟล์ jquery-ui-1.7.2.custom.zip โฟลเดอร์ที่นำไปใช้มี โฟลเดอร์ css และ js

การเรียกใช้งาน jQuery UI

<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 กำหนดความกว้าง และขนาดตัวอักษรของ ปฏิทิน

<style type="text/css">
.ui-datepicker{
	width:150px;
	font-family:tahoma;
	font-size:11px;
	text-align:center;
}
</style>

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

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

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

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

Code แสดง 2 เดือน

<script type="text/javascript">
$(function(){
	// แทรกโค้ต jquery
	$("#dateInput").datepicker({
		numberOfMonths: 2,
		showButtonPanel: true
	});
});
</script>

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

<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>