手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年12月的文章

优化 Filament 的 flatpickr 插件

Filament 自带的日期组件在实际使用的时候功能还是相对比较少,因此在看到有 flatpickr 插件提供后,就想着替换了他。替换后发现功能确实达到我想要的,但带来的另一个问题是,纯英文的,语言包无法使用。即使显式的传入'local'=>'zh'也没用。

 
为此翻看源码,结果发现,作者在 2 年前就不维护了,直接更新 PHP 和 blade 模板发现都无效。检查他整体代码后,发现只能通过重新编译他的 filament-component 来解决
 
于是做了以下几步
1、将项目拷贝到 /plugins/下
2、在 composer.json 里指定路径 
3、将 "coolsam/flatpickr": 的版本,改成"@dev",
4、重新 composer u
5、进入 flatpickr 的项目,pnpm i,安装 Esbuild,修改 resources/js/components/flatpickr.js,在顶部 import flatpickrLocales from 'flatpickr/dist/l10n';
然后,在 this.fp = xxx 的上一行加入:flatpickr.localize(flatpickrLocales)
这是因为 flatpickr 对就在的是 FlatPickrFn,具体的几个方法可以点击 import flatpickr from "flatpickr"; 进行查看
6、重新 node bin/build.js 
虽然这时候生成了,但并不会更新到 public 里,还需要手工执行 php artisan filament:assets 
至此,更新成功
 
然后在调用的组件里引入:customConfig(['locale'=>'zh'])即可。测试了一下 zh_tw 也没问题
PHP代码
  1. Flatpickr::make('created_at')->label(创建日期') 
  2.     ->customConfig([ 
  3.          'locale' => 'zh',  
  4.     ])->monthSelect(),  
So easy。
 
 
---EOF---
因为比较懒,所以没有 PR 到原库,同时也没有自己根据原库弄个新库
 
 
 

Tags: filament, flatpickr