ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ.
เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdeedatepicker jqueryui
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datepicker jqueryui
ดูแล้ว 75,175 ครั้ง
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า https://www.ninenik.com/content.php?arti_id=779 เป็นแนวทางแทน
ลองดูที่ใหม่กว่า https://www.ninenik.com/content.php?arti_id=779 เป็นแนวทางแทน
ไปที่ Copy
ทางเลือก สำหรับคนที่ต้องการใช้ jQuery UI ปฏิทิน Datepicker ใช้ปี พ.ศ. และแสดง ภาษาไทย
ซึ่งประยุกต์เพิ่มเติม จากบทความ
https://www.ninenik.com/เริ่มต้น_jQuery_UI_กับการสร้าง_ปฏิทินเลือกวันที่_datepicker_-212.html
ตัวอย่าง
ดาวน์โหลด jQuery ui เวอร์ชั่นใหม่ ๆ ได้ที่เว็บไซต์ www.jqueryui.com
โค้ดตัวอย่างสำหรับทดสอบ
<!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:95%;"> <input name="dateInput" type="text" id="dateInput" value="" /> </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 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: false, 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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
Tags::
jqueryui
datepicker
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ