เพื่อให้การใช้งาน การแสดง พ.ศ. หรือวัน เดือน ใน jqueryui datepicker
เป็นภาษาไทย จึงได้สร้างไฟล์ plugin อย่างง่าย เพียงแค่ เรียกใช้งานปกติ
และไม่ต้องเขียนโค้ดจำนวนมากในการใช้งาน เหมือน บทความเก่า
https://www.ninenik.com/content.php?arti_id=309 via @ninenik
เนื้อหาส่วนนี้ ประยุกต์จากบทความเก่าข้างต้น
ดาวน์โหลด ไฟล์ 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>
