ปรับแต่ง DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์

17 November 2014 เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee

plugin datetimepicker ปฏิทิน jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ plugin datetimepicker ปฏิทิน jquery

จากที่เคยแนะนำ DateTimePicker สำหรับใช้ในการเลือกวันที่แล้ว

จากบทความด้านล่าง แล้ว

แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก (แค่แนะนำ)

http://www.ninenik.com/content.php?arti_id=540 via @ninenik

เนื้อหาในตอนนี้จะมานำเสนอวิธีการปรับแต่ง

DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์

สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ

http://xdsoft.net/jqplugins/datetimepicker/

หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง

https://github.com/xdan/datetimepicker/archive/master.zip

แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน

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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ