PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

16 August 2009 By Ninenik Narkdee
datepicker jqueryui

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datepicker jqueryui



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



ดาวน์โหลด jQuery UI ได้ที่เว็บไซต์ http://jqueryui.com/หรือดาวน์โหลดได้ที่ คลิกที่นี่

แตกไฟล์ 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>


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: datepicker jqueryui







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ