สร้าง jquery plugin แสดง ปฏิทิน วัน เดือน พ.ศ. ภาษาไทย สำหรับ datepicker

เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdee
jquery jquery plugin ปฏิทิน

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





เพื่อให้การใช้งาน การแสดง พ.ศ. หรือวัน เดือน ใน jqueryui datepicker
เป็นภาษาไทย จึงได้สร้างไฟล์ plugin อย่างง่าย เพียงแค่ เรียกใช้งานปกติ 
และไม่ต้องเขียนโค้ดจำนวนมากในการใช้งาน เหมือน บทความเก่า
 
 
เนื้อหาส่วนนี้ ประยุกต์จากบทความเก่าข้างต้น
 
ดาวน์โหลด ไฟล์ plugin
 
เรียกใช้งาน โดยเพิ่มโค้ด plugin เข้าไป ก่อนเรียกใช้

<script src="js/jqueryui_datepicker_thai.js"></script>


ตัวอย่าง 
 
 
โค้ดทั้งหมด และการใช้งาน


<!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>
<?php  
$jquery_ui_v="1.8.5";  
$theme=array(  
    "0"=>"base",  
    "1"=>"black-tie",  
    "2"=>"blitzer",  
    "3"=>"cupertino",  
    "4"=>"dark-hive",  
    "5"=>"dot-luv",  
    "6"=>"eggplant",  
    "7"=>"excite-bike",  
    "8"=>"flick",  
    "9"=>"hot-sneaks",  
    "10"=>"humanity",  
    "11"=>"le-frog",  
    "12"=>"mint-choc",  
    "13"=>"overcast",  
    "14"=>"pepper-grinder",  
    "15"=>"redmond",  
    "16"=>"smoothness",  
    "17"=>"south-street",  
    "18"=>"start",  
    "19"=>"sunny",  
    "20"=>"swanky-purse",  
    "21"=>"trontastic",  
    "22"=>"ui-darkness",  
    "23"=>"ui-lightness",  
    "24"=>"vader"  
);  
$jquery_ui_theme=$theme[22];  
?>  
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />  
<style type="text/css">  
/* ปรับขนาดตัวอักษรของข้อความใน tabs  
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs 
*/  
.ui-tabs{  
    font-family:tahoma;  
    font-size:11px;  
}  
</style>  
<style type="text/css">
/* Overide css code กำหนดความกว้างของปฏิทินและอื่นๆ */
.ui-datepicker{
	width:220px;
	font-family:tahoma;
	font-size:11px;
	text-align:center;
}
</style>
</head>

<body>


<div style="margin:auto;width:50%;">

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

<br />
<input name="dateInput2" type="text" id="dateInput2" value="" />
<br />

<br />
<input name="dateInput3" type="text" id="dateInput3" value="" />
<br />

<br />
<div id="date_inline"></div>
<br />


<br />

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script src="js/jqueryui_datepicker_thai.js"></script>
<script type="text/javascript">
$(function(){
	$("#dateInput").datepicker({
		dateFormat: 'dd-mm-yy',
		showOn: 'button',
		numberOfMonths: 2,
//		buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
		buttonImageOnly: false,
		changeMonth: true,
		changeYear: true
	});
	
	$("#dateInput2").datepicker({
		dateFormat: 'dd-mm-yy',
		showOn: 'button',
		numberOfMonths: 2,
//		buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
		buttonImageOnly: false,
		changeMonth: true,
		changeYear: true
	});	
	
	$("#dateInput3").datepicker({
		dateFormat: 'dd-mm-yy',
		showOn: 'button',
//		buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
		buttonImageOnly: false,
		changeMonth: true,
		changeYear: true
	});		
	
	$("#date_inline").datepicker({
		dateFormat: 'dd-mm-yy',
		buttonImageOnly: false
	});
	
	$("#date_inline2").datepicker({
		dateFormat: 'dd-mm-yy',
		buttonImageOnly: false
	});	
	
});
</script>

</body>
</html>


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











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











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