จากที่เคยแนะนำ DateTimePicker สำหรับใช้ในการเลือกวันที่แล้ว
จากบทความด้านล่าง แล้ว
แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก (แค่แนะนำ)
https://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>
