Company insights

การสร้าง Date Picker ภาษาไทย และแสดงปี พ.ศ. ใน Flutter


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


สำหรับแอปที่ใช้งานในประเทศไทย นักพัฒนามักต้องการให้ Date Picker
แสดงผลเป็นภาษาไทย และใช้ปีพุทธศักราช (พ.ศ.)
ซึ่งสามารถทำได้โดยการกำหนดค่า locale เป็นภาษาไทย
และแปลงปี ค.ศ. เป็น พ.ศ. โดยการเพิ่ม 543 ปี

1. สร้างปุ่มสำหรับเปิด Date Picker


ตัวอย่างการสร้างปุ่มเพื่อเรียกใช้งาน Date Picker ใน Flutter


ElevatedButton(
 onPressed: () {
   selectDate(context);
 },
 child: Text("เลือกวันที่"),
)

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


Future<void> selectDate(BuildContext context) async {
 final DateTime? picked = await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2000),
   lastDate: DateTime(2100),
   locale: const Locale("th", "TH")
 );

 if (picked != null) {
   print(picked);
 }
}


การกำหนดค่า locale: Locale("th","TH")
จะทำให้ Date Picker แสดงชื่อเดือนและวันเป็นภาษาไทย

3. แปลงปี ค.ศ. เป็นปี พ.ศ.


Flutter จะส่งค่าปีมาเป็น ค.ศ. ดังนั้นถ้าต้องการแสดงผลเป็น พ.ศ.
สามารถแปลงปีได้ด้วยการบวก 543


String formatThaiDate(DateTime date) {
 int buddhistYear = date.year + 543;
 return "${date.day}/${date.month}/$buddhistYear";
}

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


DateTime? selectedDate;

Future<void> selectDate(BuildContext context) async {
 final DateTime? picked = await showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2000),
   lastDate: DateTime(2100),
   locale: const Locale("th", "TH"),
 );

 if (picked != null) {
   setState(() {
     selectedDate = picked;
   });
 }
}


เมื่อต้องการแสดงผลวันที่เป็นปี พ.ศ.


Text(
 selectedDate == null
   ? "ยังไม่ได้เลือกวันที่"
   : formatThaiDate(selectedDate!),
)

5. ตัวอย่างผลลัพธ์


ถ้าเลือกวันที่ 10 เมษายน 2024
ระบบจะแสดงผลเป็น


10/4/2567

สรุป


การสร้าง Date Picker ภาษาไทยใน Flutter สามารถทำได้โดยใช้
showDatePicker() พร้อมกำหนดค่า locale เป็นภาษาไทย
และหากต้องการให้แสดงปี พ.ศ. จำเป็นต้องแปลงปีจาก ค.ศ. เป็น พ.ศ.
ด้วยการเพิ่มค่า 543 ปี


วิธีนี้ช่วยให้แอปพลิเคชันที่พัฒนาด้วย Flutter
เหมาะสมกับผู้ใช้งานในประเทศไทยมากขึ้น
และทำให้รูปแบบวันที่ตรงกับการใช้งานจริงในชีวิตประจำวัน