ปรับแต่ง DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeejquery datetimepicker ปฏิทิน plugin
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery datetimepicker ปฏิทิน plugin
ไปที่
Copy
03/02/2559 รูปแบบใช้ปี พ.ศ. ยังไม่สมบุณ์ อยู้ในขั้นตอนหาวิธีการแก้ไข
อัพเดท datetimepicker รองรับภาษาไทยและปี พ.ศ. 04/03/2559
เนื่องจากการใช้งาน datetimepicker จากเนื้อหาด้านบนมีความไม่สมบูรณ์ กรณีต้องการให้รองรับ
ปี พ.ศ. จึงทำการปรับไฟล์ javascript เพิ่มเติม เพื่อให้สามารถใช้งานได้ในระดับที่น่าพอใจ
รองรับการใช้งานแบบ inline อย่างสมบูรณ์ และสำหรับกรณ๊ื ใช้สำหรับ input ใช้งานได้ในระดับที่น่าพอใจ
ความผิดพลาดลดลง สามารถดูตัวอย่าง รายการแก้ไขล่าสุดได้ที่ลิ้งค์ด้านล่างนี้
http://www.ninenik.com/demo/datetimepicker_th.php
วิธีการใช้งาน ให้ทำการคลิกขวาที่ไฟล์ดังกล่าว แล้ว view source ดูวิธีการใช้
โหลดไฟล์ css และ js ได้ในลิ้งค์นั้น โดยคลิกขวาที่ลิ้งค์ แล้วกด save
ตัวอย่าง
จากที่เคยแนะนำ DateTimePicker สำหรับใช้ในการเลือกวันที่แล้ว
จากบทความด้านล่าง แล้ว
แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก (แค่แนะนำ)
http://www.ninenik.com/content.php?arti_id=540 via @ninenik
เนื้อหาในตอนนี้จะมานำเสนอวิธีการปรับแต่ง
DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์
สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ
หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง
แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน
jquery.datetimepicker.css
jquery.datetimepicker.js
จากการใช้งานเราจะพบว่า DateTimePicker รองรับภาษาไทย และการ
กำหนดปี พ.ศ. ก็สามารถทำได้ แต่รูปแบบวันที่ในปฏิทินจะไม่ตรงตามวันปัจจุบัน
ดูตัวอย่างประกอบ
แบบที่ 1
กำหนดปกติ ภาษาอังกฤษ ปี ค.ศ.
$("#testdate1").datetimepicker({ timepicker:false, inline:true });
แบบที่ 2
กำหนดปกติ ภาษาไทย ปี ค.ศ.
$("#testdate2").datetimepicker({ timepicker:false, lang:'th', // แสดงภาษาไทย inline:true });
แบบที่ 3
กำหนดปกติ ภาษาไทย ปี พ.ศ.
$("#testdate3").datetimepicker({ timepicker:false, lang:'th', // แสดงภาษาไทย yearOffset:543, // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ inline:true });
แบบที่สามนี้เราจะพบปัญหาวันที่ไม่ตรงกับวันในสัปดาห์
เช่นแทนที่วันนี้จะเป็นวันจันทร์ กลับเป็นวันพฤหัส แบบนี้เป็นต้น
เวลานำไปใช้งาน ก็อาจจะสับสนได้ ดังนั้นจึงมีวิธีปรับแต่งพิเศษ
ตัวแบบที่ 4
แบบที่ 4
กำหนดปกติ ภาษาไทย ปี พ.ศ. วันในสัปดาห์ตรงตามเป็นจริง
var leap=3; var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."]; var yearL=new Date().getFullYear()-543; leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3; if(leap==2){ dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."]; } $("#testdate4").datetimepicker({ timepicker:false, lang:'th', // แสดงภาษาไทย onChangeMonth:function( ct ){ var leap=3; var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."]; if(ct){ var yearL=new Date(ct).getFullYear()-543; leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3; if(leap==2){ dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."]; } } this.setOptions({ i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap, }) }, i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap, yearOffset:543, // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ inline:true });
สี่ตัวอย่างข้างต้นเป็นการใช้งานแบบ inline ใช้กับ div แสดงปฏิทิน
ต่อต่อไปจะแสดงตัวอย่างการใช้งานกับ input text
ตัวอย่าง
โค้ดตัวอย่าง test_datetimepicker.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/jquery.datetimepicker.css"> </head> <body> <div style="margin:auto;width:400px;"> <br> <input type="text" name="testdate5" id="testdate5" value="" style="width:100px;"> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.datetimepicker.js"></script> <script type="text/javascript"> $(function(){ var thaiYear = function (ct) { var leap=3; var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."]; if(ct){ var yearL=new Date(ct).getFullYear()-543; leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3; if(leap==2){ dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."]; } } this.setOptions({ i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap, }) }; $("#testdate5").datetimepicker({ timepicker:false, format:'d-m-Y', // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000 lang:'th', // แสดงภาษาไทย onChangeMonth:thaiYear, onShow:thaiYear, yearOffset:543, // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ closeOnDateSelect:true, }); }); </script>
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 17-03-2017
03/02/2559 รูปแบบใช้ปี พ.ศ. ยังไม่สมบุณ์ อยู้ในขั้นตอนหาวิธีการแก้ไข
อัพเดท datetimepicker รองรับภาษาไทยและปี พ.ศ. 04/03/2559
เนื่องจากการใช้งาน datetimepicker จากเนื้อหาด้านบนมีความไม่สมบูรณ์ กรณีต้องการให้รองรับ
ปี พ.ศ. จึงทำการปรับไฟล์ javascript เพิ่มเติม เพื่อให้สามารถใช้งานได้ในระดับที่น่าพอใจ
รองรับการใช้งานแบบ inline อย่างสมบูรณ์ และสำหรับกรณ๊ื ใช้สำหรับ input ใช้งานได้ในระดับที่น่าพอใจ
ความผิดพลาดลดลง สามารถดูตัวอย่าง รายการแก้ไขล่าสุดได้ที่ลิ้งค์ด้านล่างนี้
http://www.ninenik.com/demo/datetimepicker_th.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../js/jquery.datetimepicker.css"> </head> <body> <div style="margin:auto;width:400px;"> <br> <input type="text" name="testdate5" id="testdate5" value="" style="width:100px;"> <br> <br> <div id="testdate4"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../js/jquery.datetimepicker.full.js"></script> <script type="text/javascript"> $(function(){ $.datetimepicker.setLocale('th'); // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ. // กรณีใช้แบบ inline $("#testdate4").datetimepicker({ timepicker:false, format:'d-m-Y', // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000 lang:'th', // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ. inline:true }); // กรณีใช้แบบ input $("#testdate5").datetimepicker({ timepicker:false, format:'d-m-Y', // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000 lang:'th', // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ. onSelectDate:function(dp,$input){ var yearT=new Date(dp).getFullYear()-0; var yearTH=yearT+543; var fulldate=$input.val(); var fulldateTH=fulldate.replace(yearT,yearTH); $input.val(fulldateTH); }, }); // กรณีใช้กับ input ต้องกำหนดส่วนนี้ด้วยเสมอ เพื่อปรับปีให้เป็น ค.ศ. ก่อนแสดงปฏิทิน $("#testdate5").on("mouseenter mouseleave",function(e){ var dateValue=$(this).val(); if(dateValue!=""){ var arr_date=dateValue.split("-"); // ถ้าใช้ตัวแบ่งรูปแบบอื่น ให้เปลี่ยนเป็นตามรูปแบบนั้น // ในที่นี้อยู่ในรูปแบบ 00-00-0000 เป็น d-m-Y แบ่งด่วย - ดังนั้น ตัวแปรที่เป็นปี จะอยู่ใน array // ตัวที่สอง arr_date[2] โดยเริ่มนับจาก 0 if(e.type=="mouseenter"){ var yearT=arr_date[2]-543; } if(e.type=="mouseleave"){ var yearT=parseInt(arr_date[2])+543; } dateValue=dateValue.replace(arr_date[2],yearT); $(this).val(dateValue); } }); }); </script>
วิธีการใช้งาน ให้ทำการคลิกขวาที่ไฟล์ดังกล่าว แล้ว view source ดูวิธีการใช้
โหลดไฟล์ css และ js ได้ในลิ้งค์นั้น โดยคลิกขวาที่ลิ้งค์ แล้วกด save
ตัวอย่าง
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()