رفع مشکل DatePicker در Livewire

Laravel and livewire
Laravel and livewire


خب این پست مخصوص کسانی است که تجربه ی کار با فریم‌ورک laravel و Livewire را داشته باشند پس اگر شما جزو این دسته نیستید شاید این مطالب خیلی بدردتون نخوره :)

اگر تجربه ی کار با livewire را داشته باشید احتمالا موقع استفاده از دیت‌پیکر به مشکل عدم ارسال پارامتر به کلاس بک‌اند خود شده اید. در واقع مقدار فیلد تاریخ شما به صورت Null به سمت بک‌اند ارسال می‌شود.

DatePicker
DatePicker

تفاوتی ندارد که شما از چه نوع DatePicker استفاده می‌کنید (شمسی یا میلادی) در هر صورت با این مشکل مواجه خواهید شد.

اما علت مشکل چیست؟

همانطور که احتمالا خودتون می‌دونید هسته‌ی لایو وایر با جاوا اسکریپت (Vue js) نوشته شده است و داده‌ها به صورت Ajax به سمت بک‌اند ارسال می‌شود لذا بنا به محدودیتهایی که در نسخه‌ی فعلی لایو وایر (2.5) وجود دارد امکان set کردن مقادیر فیلدها با جاوا اسکریپت وجود ندارد و اگر شما این کار را انجام دهید مقادیر فیلدهای شما null ارسال می‌شود. پس باید در این شرایط چیکار کرد؟

رفع مشکل DatePicker

خب خوشبختانه توسعه دهنده‌های لایو وایر فکر اینجا رو کردن و براش راه حلی در نظر گرفتن و این راه حل استفاده از event های خود لایو وایر می‌باشد. به مثال زیر توجه کنید:

در اینجا من فیلدی دارم با عنوان تاریخ تولد:

<input  id=&quotpersianDatePicker&quot type=&quottext&quot class=&quotform-control&quot placeholder=&quotتاریخ تولد&quot  wire:model.defer=&quotdateBirth&quot>

که وقتی کاربر روی آن کلیک می‌کند DatePicker شمسی من فعال می‌شود و کاربر تاریخ مورد نظر خود را با استفاده از آن انتخاب و بر روی دکمه‌ی submit کلیک می‌کند تا تاریخ تولد او ثبت شود.

$(&quot#persianDatePicker&quot).persianDatepicker({
    autoClose: true,
    initialValueType: 'gregorian',
    persianDigit: true,
    initialValue: true,
    observer: true,
    calendarType: 'persian',
    calendar:{
        persian: {
            locale:'en'
        },
        gregorian:{
            locale:'en'
        }
    },
    format: 'YYYY/MM/DD',
});

در حالت عادی مقدار فیلد dateBirth به صورت Null ارسال می‌شود و شما برای رفع این مشکل باید با استفاده از دستورات لایو وایر مقدار DatePicker خود را بر روی فیلد dateBirth سِت کنید.

@this.set('dateBirth', 'valueDatePicker', true);

این دستور را درون event دیت‌پیکر خود () قرار دهید تا مقادیر DatePicker بر روی فیلد مورد نظر set شوند.

کد کامل آن:

<html>
    <body>
        <div class=&quotmain&quot>
            <form wire:submit.prevent=&quotmethodName&quot>

                <div class=&quotcol-md-6&quot>
                    <input  id=&quotpersianDatePicker&quot type=&quottext&quot class=&quotform-control&quot placeholder=&quotتاریخ تولد&quot wire:model.defer=&quotdateBirth&quot>
                </div>

                <div class=&quotcol-md-6 col-sm-6&quot>
                    <input type=&quotsubmit&quot class=&quotbtn btn-info&quot value=&quotثبت کن&quot>
                </div>

            </form>
        </div>

    
        $(document).ready(function () {
            $(&quot.persianDatePicker&quot).persianDatepicker({
                autoClose: true,
                initialValueType: 'gregorian',
                persianDigit: true,
                initialValue: true,
                observer: true,
                calendarType: 'persian',
                calendar:{
                    persian: {
                        locale:'en'
                    },
                    gregorian:{
                        locale:'en'
                    }
                },
                format: 'YYYY/MM/DD',

                : function(unix){
                    @this.set('dateBirth', unix, true);
                },

            });
        });
    
    </body>
</html>

نکته‌ای که باید در نظر داشته باشید این است که حتما کدهای DatePicker شما باید در همان کامپونت فیلد تاریخ شما باشد، مثلا اگر از master page یا layouts استفاده می‌کنید نباید کدهای مربوط به DatePicker خود را درون کامپوننت دیگری (مثلا کامپوننت footer) خود قرار دهید چون در این صورت با خطای ناشناس بودن id مواجه خواهید شد.

موفق باشید :)