Date Picker เป็นเครื่องมือที่ใช้สำหรับให้ผู้ใช้เลือกวันที่ในฟอร์มต่าง ๆ เช่น
วันเกิด วันที่นัดหมาย หรือวันที่ทำรายการ
โดยปกติ Date Picker จะแสดงผลเป็นภาษาอังกฤษและปี ค.ศ. (AD)
แต่ในระบบที่ใช้งานในประเทศไทย มักต้องการให้แสดงผลเป็นภาษาไทย
และใช้ปี พ.ศ. (Buddhist Era)

แนวทางการทำ Date Picker ภาษาไทย

มีหลายวิธีในการทำ Date Picker ภาษาไทย เช่น

• ใช้ HTML + JavaScript ปรับปีเป็น พ.ศ.


• ใช้ jQuery UI Datepicker


• ใช้ Flatpickr หรือ Library อื่น ๆ


• ใช้ Datepicker ของ Bootstrap

ตัวอย่างการใช้ jQuery UI Datepicker ภาษาไทย

ก่อนอื่นต้องโหลด Library ที่จำเป็น

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

สร้างช่องเลือกวันที่

<input type="text" id="datepicker">

ตั้งค่า Datepicker ให้เป็นภาษาไทย

$(function () {
 $.datepicker.regional['th'] = {
   closeText: 'ปิด',
   prevText: 'ก่อนหน้า',
   nextText: 'ถัดไป',
   currentText: 'วันนี้',
   monthNames: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน',
                'กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
   monthNamesShort: ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.',
                     'ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'],
   dayNames: ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัส','ศุกร์','เสาร์'],
   dayNamesShort: ['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'],
   dayNamesMin: ['อา','จ','อ','พ','พฤ','ศ','ส'],
   dateFormat: 'dd/mm/yy'
 };
 $.datepicker.setDefaults($.datepicker.regional['th']);
 $("#datepicker").datepicker({
   changeMonth: true,
   changeYear: true,
   yearRange: "1900:2100",
   beforeShow: function(input, inst) {
     if ($(input).val() != "") {
       var year = $(input).val().split("/")[2];
       year = parseInt(year) - 543;
       inst.selectedYear = year;
     }
   },
   onClose: function(dateText, inst) {
     if (dateText != "") {
       var parts = dateText.split("/");
       var year = parseInt(parts[2]) + 543;
       $(this).val(parts[0] + "/" + parts[1] + "/" + year);
     }
   }
 });
});

หลักการแปลงปี ค.ศ. เป็น พ.ศ.

ปี พ.ศ. จะมากกว่าปี ค.ศ. อยู่ 543 ปี

พ.ศ. = ค.ศ. + 543

ตัวอย่าง

• 2024 = 2567


• 2025 = 2568


• 2026 = 2569

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

• ฟอร์มสมัครสมาชิก


• ระบบจองคิว


• ระบบจองโรงแรม


• ระบบกรอกข้อมูลราชการ

สรุป

การทำ Date Picker ภาษาไทยสามารถทำได้โดยใช้ Library เช่น jQuery UI
และปรับค่าภาษาให้เป็นภาษาไทย พร้อมทั้งแปลงปี ค.ศ. เป็นปี พ.ศ.
โดยใช้หลักการบวก 543 ปี
ซึ่งจะช่วยให้ระบบรองรับผู้ใช้ในประเทศไทยได้อย่างเหมาะสม