ทางเลือก สำหรับคนที่ต้องการใช้ jQuery UI ปฏิทิน Datepicker ใช้ปี พ.ศ. และแสดง ภาษาไทย
ซึ่งประยุกต์เพิ่มเติม จากบทความ
https://www.ninenik.com/เริ่มต้น_jQuery_UI_กับการสร้าง_ปฏิทินเลือกวันที่_datepicker_-212.html
ตัวอย่าง
ดาวน์โหลด jQuery ui เวอร์ชั่นใหม่ ๆ ได้ที่เว็บไซต์ www.jqueryui.com
โค้ดตัวอย่างสำหรับทดสอบ
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 | <!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: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> |
