Search for
Login | Username Password Forgot? | Email: | Create Account
Non English | Entries: 397 | Views: 306 | Updated: 4 hours ago | | Add to My Feeds
Report

ทางเลือก สำหรับคนที่ต้องการใช้ jQuery UI ปฏิทิน Datepicker ใช้ปี พ.ศ. และแสดง ภาษาไทย
ซึ่งประยุกต์เพิ่มเติม จากบทความ
http://www.ninenik.com/เริ่มต้น_jQuery_UI_กับการสร้าง_ปฏิทินเลือกวันที่_datepicker_-212.html

ตัวอย่าง

ดาวน์โหลด jQuery ui เวอร์ชั่นใหม่ ๆ ได้ที่เว็บไซต์ www.jqueryui.com

หรือดาวน์โหลด เวอร์ชันตามตัวอย่าง ได้ที่นี่ http://www.ninenik.com/download/jquery-ui-1.7.2.custom.zip


โค้ดตัวอย่างสำหรับทดสอบ

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ui datepickerภาษาไทย ปี พ.ศ.</title>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css">
<style type="text/css">
/* Overide css code กำหนดความกว้างของปฏิทินและอื่นๆ */
.ui-datepicker{
	width:170px;
	font-family:tahoma;
	font-size:11px;
	text-align:center;
}
</style>
</head>

<body>

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

<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(){
	var dateBefore=null;
	$("#dateInput").datepicker({
		dateFormat: 'dd-mm-yy',
		showOn: 'button',
		buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
		buttonImageOnly: true,
		dayNamesMin: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'], 
		monthNamesShort: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
		changeMonth: true,
		changeYear: true ,
		beforeShow:function(){
			if($(this).val()!=""){
				var arrayDate=$(this).val().split("-");		
				arrayDate[2]=parseInt(arrayDate[2])-543;
				$(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);
			}
			setTimeout(function(){
				$.each($(".ui-datepicker-year option"),function(j,k){
					var textYear=parseInt($(".ui-datepicker-year option").eq(j).val())+543;
					$(".ui-datepicker-year option").eq(j).text(textYear);
				});				
			},50);

		},
		onChangeMonthYear: function(){
			setTimeout(function(){
				$.each($(".ui-datepicker-year option"),function(j,k){
					var textYear=parseInt($(".ui-datepicker-year option").eq(j).val())+543;
					$(".ui-datepicker-year option").eq(j).text(textYear);
				});				
			},50);		
		},
		onClose:function(){
			if($(this).val()!="" && $(this).val()==dateBefore){			
				var arrayDate=dateBefore.split("-");
				arrayDate[2]=parseInt(arrayDate[2])+543;
				$(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);	
			}		
		},
		onSelect: function(dateText, inst){ 
			dateBefore=$(this).val();
			var arrayDate=dateText.split("-");
			arrayDate[2]=parseInt(arrayDate[2])+543;
			$(this).val(arrayDate[0]+"-"+arrayDate[1]+"-"+arrayDate[2]);
		}

	});
	
});
</script>

</body>
</html>

หรือ view source ที่ไฟล์ demo ได้ที่

http://www.ninenik.com/demo/date_picker.php


More from บทความ PHP AJAX CSS Javascript MySql jQuery


^ Back To Top