Username
Forgot password?
Welcome to our site!
Or Join with FTTF

jQuery datepicker ปฏิทินภาษาไทยและวันหยุด

0

4087 views
วันนี้ผมจะมาพูดถึง 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-1.10.3.custom.js ให้สามารถใช้ ปี พ.ศ. ได้แล้วโดยเพิ่ม Properties yearOffSet ถ้าระบุเป็น yearOffSet : 0 จะเป็นปีค.ศ. แต่ถ้าอยากให้เป็นปีพ.ศ. ให้ระบุเป็น 543 เช่น yearOffSet : 543

บางครั้ง เราอาจต้องการ 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, ''];
    }


Event ที่น่าสนใจ

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

 
asked January 8, 2014 at 8:38 PM

 th

1 Answer

0
 
ดูดี มี ชาติตระกูล
flag
answered January 8, 2014 at 8:40 PM

Your answer

Join with account you already have

FTTF

Preview

Alert