แสดง DatePicker ปี พ.ศ. เป็นภาษาไทย ด้วย FilamentPHP

ใน FilamentPHP มี Datepicker ช่วยให้เราแสดง การเลือกวันที่ใน form ได้อยู่แล้ว แต่ วันที่แสดงจะเป็น ภาษาอังกฤษและเป็นปี ค.ศ. ทีนี้ถ้าเว็บที่เราพัฒนามีผู้ใช้งานเป็นคนไทยอยู่แล้ว การแสดงวัน/เดือน/ปี ให้เป็นปี พ.ศ. และเป็นภาษาไทย ก็จะช่วยเพิ่ม User Experience และความเป็น User Frendly ให้เว็บของเราใช้งานง่ายขึ้นด้วยเช่นกัน

ผมเลยสร้าง package Filament Thai Date Picker ขึ้นมาเผื่อแก้ปัญหาตรงจุดนี้นะครับ

Filament Thai Date Picker

วิธิการติดตั้งใช้งาน

run คำสั่ง

composer require phattarachai/filament-thai-date-picker

วิธีการใช้งาน Thai Date Picker Form Component

วิธีการใช้งานสามารถเรียกใช้เหมือน DatePicker ตามปกติ แต่เปลี่ยนเป็นเรียกใช้คลาส ThaiDatePicker แทน ตามตัวอย่าง

use Phattarachai/FilamentThaiDatePicker;

ThaiDatePicker::make('order_date')
    ->label('วันที่สั่งซื้อ')
    ->suffixIcon('heroicon-o-calendar')

โดยปี พ.ศ.จะใช้สำหรับการแสดงผลบน UI เท่านั้นเวลาใช้งาน state เพื่อบันทึกลงฐานข้อมูลจะได้เป็นปี ค.ศ. เหมือน DatePicker ตามปกติ

$data = $this->form->getState();
// $data['order_date'] = '2024-05-17'

นอกจากฟอร์มคอมโพเนนต์ ThaiDatePicker แล้ว package นี้ยังอำนวยความสะดวกในการแสดงผล วัน/เดือน/ปี พ.ศ. เป็นภาษาไทยใน Table และ Infolist ด้วยเช่นกัน

การแสดงวันที่ภาษาไทยใน Table Column

use Filament\Tables;

Tables\Columns\TextColumn::make('order_date')
    ->label('วันที่')
    ->thaidate()
    // สามารถระบุ date format ได้เหมือน function date_format ของ PHP
    // default format เป็น d M y 
    // เช่น 18 พ.ค. 67

การแสดงวันที่ภาษาไทยใน Infolist

use Filament\Infolists\Components\TextEntry;

TextEntry::make('order_date')
    ->label('วันที่สั่งซื้อ')
    ->thaidate(),
    // 18 พ.ค. 67

สามารถดูรายละเอียด package เพิ่มเติมได้ที่ GitHub

https://github.com/phattarachai/filament-thai-date-picker