jQuery datepicker ปฏิทินภาษาไทยและวันหยุด (เดือน กุมภาพันธ์ 2559 ต้องมี 29 วันนะครับอิอิ)

วันนี้ผมจะมาพูดถึง JavaScript FrameWork ที่ Hot ที่สุดในขณะนี้นั้นก็คือ jQuery UI แต่จะเจาะลึกไปที่ datepicker หรือ jQuery ปฏิทินไทย โดยผมจะขอยกตัวอย่าง Function ที่ผมเห็นว่ามีความสำคัญที่หาอ่านได้ยากหรือหาอ่านได้แต่อ่านแล้วอาจจะยังงงๆ (^_^ ไม่แน่นะครับอ่านตัวอย่างของผมแล้วอาจยิ่งงงไปก้นใหญ่ #_#) วันนี้เราจะมาทำมันให้ง่ายกันครับ อาจจะไม่ดีที่สุดนะครับแต่ผมลองแล้วมันก็ Work ดีครับผม  เริ่มเลยละกัน ปฏิทินหรือ calendar ที่ jQuery UI ให้มา Default แล้วเป็นภาษาอักกฤษ ถึงแม้จะสามารถ Set Properties ให้เป็นภาษาต่างๆ ได้โดยตามตัวอย่าง Code ด้านล่าง คือการนิยามภาษาที่เราต้องการขึ้นมาใช้เอง

 $.datepicker.regional['th'] ={
        changeMonth: true,
        changeYear: true,
        showOn: "ปุ่ม",
        buttonImage: 'images/calendar.gif',
        buttonImageOnly: true,
        dateFormat: 'dd M yy',
        dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
        dayNamesMin: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'],
        monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
        monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
        constrainInput: true,
        yearRange: '-20:+0',
        buttonText: 'เลือก',
    };

    $.datepicker.setDefaults($.datepicker.regional['th']);

 

และวิธีการเรียกใช้ก็คือ

 

$(function() {
     $( "#datepicker" ).datepicker( $.datepicker.regional["th"] );   // บอกให้ใช้ Propertie ภาษาที่เรานิยามไว้
    $( "#datepicker" ).datepicker();                                 //Innit DatePicker ไปที่ Control ที่มี ID = datepicker
});

 

แต่ปัญาจริงๆ ของ Date Picker ที่ jQuery UI ให้มามันเป็นเรื่องของปีเพราะเขาไม่ได้ทำ Function มาเพื่อปี พ.ศ. ซึ่งถ้าทำเพียงด้านบนปีจึงยังผิดอยู่คือแสดงเป็น ค.ศ.

 

ในที่นี้ผมได้ทำการ แก้ไข Code  jquery-ui-x.x.x.custom.js ให้สามารถใช้ ปี พ.ศ. ได้แล้วโดยเพิ่ม Properties  yearOffSet ถ้าระบุเป็น yearOffSet : 0 จะเป็นปีค.ศ. แต่ถ้าอยากให้เป็นปีพ.ศ. ให้ระบุเป็น 543 เช่น yearOffSet : 543 (jquery-ui-x.xx.x.custom.js  สำหรับการ Custom Script นี้ผมขอไม่อธิบายนะครับ แต่หากท่านใดอยากรู้ว่าแก้ยังไงให้ทำการเปิด Script นี้ขึ้นมาแล้วค้นหาคำว่า www.javascriptthai.com ก็จะเจอส่วนที่ผมทำการแก้ไขครับ)
ตัวอย่างปฏิทิน ภาษาไทยเต็มรูปแบบ

ตัวอย่างปฏิทิน ภาษาไทยเต็มรูปแบบ + วันหยุด (สมมุติว่าหยุดทุกวันที่  1 , 4, 6,11 ของทุกเดือน)

บางครั้ง เราอาจต้องการ Disable บางวันที่เป็นวันหยุดให้ไม่สามารถทำการเลือกได้หรือแสดง icon ในวันหยุดในวันนั้นโดยหลักการ ผมใช้ OnBeforShow เพื่อไปหาค่าวันหยุดในเดือนและปีนั้นๆ และใช้ beforeShowDay เพื่อทำาร  Disable และ Add style  Sheet  ในวันนั้นๆ

 

ตัวอย่าง Code การ Set Holiday Date

 var Holidays;

    //On Selected Date
    //Have Check Date
    function CheckDate(date) {
        var day = date.getDate();
        var selectable = true;//ระบุว่าสามารถเลือกวันที่ได้หรือไม่ True = ได้ False = ไม่ได้
        var CssClass = '';

        if (Holidays != null) {

            for (var i = 0; i < Holidays.length; i++) {
                var value = Holidays[i];
                if (value == day) {

                    selectable = false;
                    CssClass = 'specialDate';
                    break;
                }
            }
        }
        return [selectable, CssClass, ''];
    }

refer API http://api.jqueryui.com/datepicker/

Event ที่น่าสนใจ

Event and Properties Description
beforeShowDay จะส่งค่าทุกวันในเดือน เข้าสู่ Function  ที่กำหนด
onSelect เกิดเมื่อเลือกวันที่ในเดือนนั้นๆ
onChangeMonthYear เกิดเมื่อเลือก Drop Down ไม่ว่าจะเป็นเดือนหรือปี
beforeShow เกิดเมื่อกำลังจะแสดงปฏิทินจะเกิดเหตุการณ์นี้ก่อน beforeShowDay 
yearRange ช่วงของปีที่ต้องการแสดง   เช่น yearRange: '-20:+0' ย้อนหลังไป 20 จากปีปัจจุบัน

 

SOURCECODE

Demo Vesion jquery-ui-1.11.4 (ตัวล่าสุด)

-jquery-1.12.3.js

-jquery-ui-1.11.4

Demo Vesion jquery-ui-1.10.3

-jquery-1.9.1.js

-jquery-ui-1.10.3.custom.js

 

หมายเหตุ หากมีการเปลี่ยน Update Vesrion ของ jquery-ui แล้วผมยังไม่ได้ทำการ Update ให้เพื่อนๆ สามารถแก้ไขได้เองโดยเปิดไฟล์ jquery-ui-x.xx.x.custom.js แล้วค้นหาคำว่า javascriptthai ใน Version ด้านบนแล้วก็ Copy ไปตัวใหม่ได้เองเลยครับ

หวังว่าคงมีประโยชน์บ้างนะครับ ^_^

 

Leave a Reply