ทำ DatePicker ปี พ.ศ. ภาษาไทยใน Filament ด้วย ThaiDatePicker

DatePicker ของ Filament ใช้ง่ายและครบ ติดแค่หน้าจอแสดงชื่อเดือนเป็นภาษาอังกฤษ และปีเป็น ค.ศ. ส่วนคนที่ใช้ระบบหลังบ้านของเรา ไม่ว่าจะเป็นฝ่ายบัญชี ฝ่ายขาย หรือเจ้าหน้าที่หน่วยงานรัฐ อ่านปี พ.ศ. กันทุกวันในเอกสาร พอเจอ 2026 ในฟอร์มก็ต้องหยุดบวกเลขในหัว หรือพิมพ์ปีผิดไปเลย

phattarachai/filament-thai-date-picker เปลี่ยนแค่สิ่งที่ผู้ใช้เห็น ปฏิทินเป็นภาษาไทย ปีเป็น พ.ศ. ส่วนค่าที่ฟอร์มส่งเข้า Model ยังเป็นวันที่ ค.ศ. เหมือน DatePicker ตัวเดิมทุกอย่าง

ติดตั้ง#

composer require phattarachai/filament-thai-date-picker

แพ็กเกจมีไฟล์ JavaScript ของปฏิทินมาด้วย ลงเสร็จแล้วให้ publish ไฟล์ไปไว้ใน public/ ด้วยคำสั่งนี้ ถ้าใน post-autoload-dump ของ composer.json มี php artisan filament:upgrade อยู่แล้ว ข้ามขั้นนี้ได้

php artisan filament:upgrade

แต่ละ major ของแพ็กเกจใช้กับ Filament คนละรุ่น ถ้าโปรเจกต์ยังอยู่บน Filament 3 หรือ 4 ก็ยังติดตั้งได้ Composer จะเลือกเวอร์ชันที่เข้ากันให้เอง

ถ้าใช้ Filament 5 อยู่บน PHP 8.2 หรือ Laravel 11 ให้ใช้ 3.x (^3.0) โปรเจกต์ใหม่ใช้ 4.x ได้เลย ตั้งแต่ 4.1 ต้องใช้ Filament 5.10.1 ขึ้นไป ถ้า Filament ในโปรเจกต์เก่ากว่านั้น Composer จะลง 4.0.x ให้แทน โพสต์นี้เขียนตามเวอร์ชัน 4.1.0

ใช้ ThaiDatePicker ในฟอร์ม#

ThaiDatePicker สืบทอดมาจาก DatePicker ของ Filament จึงเปลี่ยนแค่ชื่อคลาส เมธอดอย่าง required(), minDate() หรือ suffixIcon() ใช้ได้เหมือนเดิม

use Phattarachai\FilamentThaiDatePicker\ThaiDatePicker;

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

ชื่อเดือน ชื่อวัน และปีในปฏิทินเป็นภาษาไทย ช่องด้านบนแสดงวันที่ที่เลือกแบบ 18 ต.ค. 69

หัวปฏิทินมีช่องปีให้พิมพ์ได้ ผู้ใช้พิมพ์เป็น พ.ศ. อย่าง 2570 ได้เลย ปฏิทินจะกระโดดไปปีนั้นทันที ไม่ต้องคิดเป็น ค.ศ. เอง

ช่องวันที่ด้านบนแสดงแบบ 18 ต.ค. 69 ถ้าอยากได้รูปแบบอื่น เรียก displayFormat() ได้เหมือน DatePicker ปกติ ใช้ตัวอักษรแบบ date() ของ PHP โดย Y กับ y ออกมาเป็นปี พ.ศ.

ThaiDatePicker::make('order_date')
    ->displayFormat('j F Y'), // 18 ตุลาคม 2569

แพ็กเกจไม่มี CSS ของตัวเอง หน้าตาของปฏิทินมาจาก class ของ Filament ทั้งหมด จึงเปลี่ยนตาม theme ของ panel และใช้ได้ใน dark mode โดยไม่ต้องตั้งค่าเพิ่ม

ปฏิทินตัวเดียวกันใน dark mode ของ Filament

ถ้ามีเวลาด้วย ให้ใช้ ThaiDateTimePicker#

ถ้าคอลัมน์เก็บทั้งวันที่และเวลา ใช้ ThaiDateTimePicker แทน DateTimePicker

use Phattarachai\FilamentThaiDatePicker\ThaiDateTimePicker;

ThaiDateTimePicker::make('delivered_at')
    ->label('เวลาส่งของ')
    ->suffixIcon('heroicon-o-calendar'),

ใต้ปฏิทินมีช่องชั่วโมง นาที และวินาที ช่องด้านบนแสดงวันที่ พ.ศ. ต่อด้วยเวลาแบบ 24 ชั่วโมง

DateTimePicker ของ Filament เปิดช่องวินาทีไว้ตั้งแต่แรก ถ้างานไม่ต้องละเอียดถึงวินาที เรียก ->seconds(false) ต่อท้าย ช่องวินาทีจะหายไป ส่วนช่องที่เก็บแค่เวลา เช่น เวลาเปิดร้าน เรียก ->date(false) ปฏิทินจะหายไป เหลือแค่ช่องเวลา

ฐานข้อมูลยังเก็บเป็น ค.ศ. เหมือนเดิม#

ปี พ.ศ. เป็นเรื่องของการแสดงผล ส่วนข้อมูลข้างหลังควรเป็นแบบที่ทุกเครื่องมือเข้าใจตรงกัน แพ็กเกจจึงแปลงปีแค่ในหน้าจอ

$data = $this->form->getState();
// $data['order_date'] = '2026-10-18'

เพราะค่าที่ได้เป็น ค.ศ. เหมือนเดิม โค้ดส่วนอื่นของระบบจึงไม่ต้องรู้ว่าหน้าจอแสดง พ.ศ. อยู่ where('order_date', '>=', now()) ยังใช้ได้ การเรียงลำดับ รายงาน การ export ไป Excel หรือการส่งข้อมูลให้ระบบอื่นก็ได้วันที่แบบมาตรฐาน minDate() และ maxDate() ก็รับ Carbon หรือวันที่ ค.ศ. ตามปกติ ไม่ต้องมีโค้ดบวก 543 กระจายอยู่ในแอป

แสดงวันที่ไทยใน Table#

แพ็กเกจเพิ่มเมธอด thaidate() และ thaidatetime() ให้ TextColumn ของ Filament ไว้ด้วย เรียกต่อท้ายคอลัมน์วันที่ได้เลย

use Filament\Tables\Columns\TextColumn;

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

TextColumn::make('delivered_at')
    ->label('ส่งของ')
    ->thaidate()
    ->timeDescription(),
    // 20 ต.ค. 69
    // 14:30

TextColumn::make('confirmed_date')
    ->label('ยืนยัน')
    ->thaidate(default: '-'),

คอลัมน์วันที่แสดงเป็น พ.ศ. คอลัมน์ส่งของมีเวลาเป็นบรรทัดรอง และแถวที่ยังไม่ยืนยันแสดงขีดแทนช่องว่าง

• thaidate() ใช้รูปแบบ j M y ส่วน thaidatetime() ใช้ j M y H:i (18 ต.ค. 69 14:30)
• timeDescription() เอาเวลามาใส่เป็นบรรทัดรองใต้วันที่ ใช้กับคอลัมน์ที่ cast เป็น datetime ใน Model
• ถ้าคอลัมน์ว่างได้ ส่ง default เป็นข้อความที่อยากให้แสดงแทน

แสดงวันที่ไทยใน Infolist#

หน้า View ใช้เมธอดชุดเดียวกันกับ TextEntry

use Filament\Infolists\Components\TextEntry;

TextEntry::make('order_date')
    ->label('วันที่สั่งซื้อ')
    ->thaidate('j F Y'),
    // 18 ตุลาคม 2569

TextEntry::make('delivered_at')
    ->label('เวลาส่งของ')
    ->thaidatetime(),

TextEntry::make('confirmed_date')
    ->label('วันที่ยืนยัน')
    ->thaidate(default: '-'),

วันที่สั่งซื้อแสดงชื่อเดือนเต็มตาม format j F Y ส่วนวันที่ยืนยันที่ยังว่างแสดงเป็นขีด

ทั้ง thaidate() และ thaidatetime() รับพารามิเตอร์ชุดเดียวกัน ทั้งใน Table และ Infolist

ตัวอักษรใน format คือชุดเดียวกับ thaidate() เพราะ macro พวกนี้เรียก thaidate อยู่ข้างหลัง F ได้ชื่อเดือนเต็ม M ได้ชื่อย่อ Y ได้ปี พ.ศ. 4 หลัก และ y ได้ 2 หลัก ถ้าอยากแสดงวันที่ไทยในส่วนอื่นของแอป เช่น ใน Blade หรือใน PDF ก็ใช้ thaidate ตัวเดียวกันได้เลย

ถ้าโปรเจกต์ลงแค่ filament/forms ไม่มี Table หรือ Infolist แพ็กเกจก็ข้ามการเพิ่มเมธอดให้คลาสที่ไม่มี ใช้แค่ picker ได้โดยไม่ error

GitHub: phattarachai/filament-thai-date-picker