เพื่อให้การใช้งาน การแสดง พ.ศ. หรือวัน เดือน ใน jqueryui datepicker
เป็นภาษาไทย จึงได้สร้างไฟล์ plugin อย่างง่าย เพียงแค่ เรียกใช้งานปกติ
และไม่ต้องเขียนโค้ดจำนวนมากในการใช้งาน เหมือน บทความเก่า
https://www.ninenik.com/content.php?arti_id=309 via @ninenik
เนื้อหาส่วนนี้ ประยุกต์จากบทความเก่าข้างต้น
ดาวน์โหลด ไฟล์ plugin
เรียกใช้งาน โดยเพิ่มโค้ด plugin เข้าไป ก่อนเรียกใช้
1 | <script src="js/jqueryui_datepicker_thai.js"></script> |
ตัวอย่าง
โค้ดทั้งหมด และการใช้งาน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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> |
