ایجاد DatePicker فارسی با Livewire

سلام دوستان
من تازه کار با لایو وایر رو شروع کردم و در حین پروژه به فیلد تاریخ نیاز داشتم که حالت datepicker باشه بخاطر همین تو نت گشتم که ببینم مورد آماده ای هست که نیاز منو برطرف کنه که متاسفانه یا خوشبختانه چیزی پیدا نکردم .
بنابراین خودم اومدم و یدونه درست کردم و برای شما قرار می دم ان شا الله بدردتون بخوره .

در این آموزش من از Pikaday و Alpine js و moment.js فارسی استفاده کردم .

برای شروع کار شما باید فایل های مورد نیاز که لینکشونو میزارم به پروژه اضافه کنین :
سه تا فایل که تو header یا body اضافه کنین مشکلی نداره :
عنوان لینک مورد نظر
فایلها رو درون یک فایل زیپ گذاشتم و لینک دانلودش با لا هست . چون اینجا قابلیت آپلود فایل نیست . اگر لینک دانلود کار نکرد یعنی او نسایت فایل رو پاک کرده است و این دیگه تقصیر من نیست و شرمنده اخلاق کونگ فو کاریتون هستم . 😂
البته باید Alpine js هم لینکشو اضافه کنین :

    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

خب بعد از اینکه فایلها رو به پروژه اضافه کردین نوبت میرسه به فارسی کردن فیلد input که تاریخ رو بصورت فارسی نمایش بده این قطعه کد جاوا رو نیز در فایل js پروژه اضافه کنین و مطمئن بشین که در صفحه ای که فیلد تاریخ هست لود شده باشه .

<script>
moment.locale('fa'); 
</script>

بعد از این کار شما با موفقیت تاریخ فارسی رو به پروژه اضافه کردین حالا نوبت میرسه به درست کردن فیلد input تاریخ و استفاده از اون :

    <input name="date"   type="text" wire:model.lazy='date'
                    id="datepicker"
                         x-data
            x-ref="input"
         class=" form-control date @error('date') is-invalid @enderror"
    x-init="new Pikaday({ field: $refs.input,format: 'YYYY/MM/DD', minDate: new Date(),})"       >

@error('date')
  <span class="text-danger my-2">{{ $message }}</span>
   @enderror

دقت کنین از wire:model .defer استفاده نکنین حتما lazy باشه یا غیره ... چون اگر از defer استفاده کنین کار نمیکنه نمیدونم چرا و حوصله شم ندارم بدونم همینقدر کارمو راه میندازه بیشترش برا خودتون 😂
من اسم فیلدم در وایر date هست شما هرچی که استفاده میکنین بزارین .

برای ذخیره در دیتا بیس هم از carbon و morilog/jalali برای تبدیل تاریخ شمسی به میلادی استفاده کنین .

تا همینجا فک کنم فهمیدین چجوری میشه اگه توضیح بیشتر خاستین بگین .