PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

17 November 2014 By


จากที่เคยแนะนำ 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>   
 

Tags:: plugin datetimepicker ปฏิทิน jquery




03/02/2559 รูปแบบใช้ปี พ.ศ. ยังไม่สมบุณ์ อยู้ในขั้นตอนหาวิธีการแก้ไข

อัพเดท datetimepicker รองรับภาษาไทยและปี พ.ศ. 04/03/2559

เนื่องจากการใช้งาน datetimepicker จากเนื้อหาด้านบนมีความไม่สมบูรณ์ กรณีต้องการให้รองรับ
ปี พ.ศ. จึงทำการปรับไฟล์ javascript เพิ่มเติม เพื่อให้สามารถใช้งานได้ในระดับที่น่าพอใจ 
รองรับการใช้งานแบบ inline อย่างสมบูรณ์ และสำหรับกรณ๊ื ใช้สำหรับ input ใช้งานได้ในระดับที่น่าพอใจ
ความผิดพลาดลดลง  สามารถดูตัวอย่าง รายการแก้ไขล่าสุดได้ที่ลิ้งค์ด้านล่างนี้

http://www.ninenik.com/demo/datetimepicker_th.php

วิธีการใช้งาน ให้ทำการคลิกขวาที่ไฟล์ดังกล่าว แล้ว view source ดูวิธีการใช้ 
โหลดไฟล์ css และ js ได้ในลิ้งค์นั้น โดยคลิกขวาที่ลิ้งค์ แล้วกด save

ตัวอย่าง



URL สำหรับอ้างอิง