สร้าง jquery plugin แสดง ปฏิทิน วัน เดือน พ.ศ. ภาษาไทย สำหรับ datepicker
เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdeeปฏิทิน jquery jquery plugin
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ปฏิทิน jquery jquery plugin
ดูแล้ว 34,076 ครั้ง
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า https://www.ninenik.com/content.php?arti_id=779 เป็นแนวทางแทน
ลองดูที่ใหม่กว่า https://www.ninenik.com/content.php?arti_id=779 เป็นแนวทางแทน
ไปที่ Copy
เพื่อให้การใช้งาน การแสดง พ.ศ. หรือวัน เดือน ใน 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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ