การปรับ jquery-ui datePicker ให้แสดงเป็นภาษาไทย

 


ดูตัวอย่าง

jQuery CDN

Uncompressed: https://code.jquery.com/ui/1.13.3/jquery-ui.js

Compressed: https://code.jquery.com/ui/1.13.3/jquery-ui.min.js

Themes: black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightness, and vader.

การเปลี่ยนธีม (Theme)

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/theme name/jquery-ui.css">

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datepicker Thai Localization</title>

<!-- Include jQuery and jQuery UI -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

</head>
<body>

<input type="text" id="datePickerInput">
<button id="showCalendarButton">Show Calendar</button>

<script>
$(document).ready(function() {
    var bookingDate;

    // Localization for Thai language
    $.datepicker.regional['th'] = {
        closeText: 'ปิด',
        prevText: '&#xAB;&#xA0;ย้อน',
        nextText: 'ถัดไป&#xA0;&#xBB;',
        currentText: 'วันนี้',
        monthNames: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน',
        'กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
        monthNamesShort: ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.',
        'ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'],
        dayNames: ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'],
        dayNamesShort: ['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'],
        dayNamesMin: ['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'],
        weekHeader: 'Wk',
        dateFormat: 'dd/mm/yy',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };

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

    // Custom function to convert CE year to BE year
    function toBuddhistYear(year) {
        return year + 543;
    }

    // Initialize Datepicker with Thai localization and BE year conversion
    $("#datePickerInput").datepicker({
        dateFormat: 'dd MM yy',
        beforeShow: function(input, inst) {
            setTimeout(function() {
                var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
                var selectYear = inst.dpDiv.find('.ui-datepicker-year');
                selectYear.each(function() {
                    var year = parseInt($(this).text(), 10);
                    $(this).text(toBuddhistYear(year));
                });
            }, 1);
        },
        onChangeMonthYear: function(year, month, inst) {
            setTimeout(function() {
                var selectYear = inst.dpDiv.find('.ui-datepicker-year');
                selectYear.each(function() {
                    var year = parseInt($(this).text(), 10);
                    $(this).text(toBuddhistYear(year));
                });
            }, 1);
        },
        onSelect: function(dateText, inst) {
            var selectedDate = $(this).datepicker('getDate');
            var year = selectedDate.getFullYear();
            var month = selectedDate.getMonth();
            var day = selectedDate.getDate();
            var buddhistYear = toBuddhistYear(year);

            bookingDate = day + " " + $.datepicker.regional['th'].monthNames[month] + " " + buddhistYear;
            console.log("Selected date (Thai): " + bookingDate);
        }
    });

    // Open the calendar when clicking the button
    $("#showCalendarButton").click(function() {
        $("#datePickerInput").focus();
    });
});

</script>

</body>
</html>


ที่มา: https://blog.jqueryui.com/2024/04/jquery-ui-1-13-3-released/


แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า