راکت

مشکل با Persian Date Picker و لایووایر

11 پاسخ

سلام خدمت دوستان گرامی
من حین کار کردن با Persian Date Picker و Livewire به یه مشکل برخوردم.
من یه فرم دارم که توی اون همه چیز خوب کار می‌کنه و DatePicker هم فعال میشه و به درستی کار میکنه.
اما اگر من فیلدهای دیگه رو تغییر بدم، اطلاعات درون DatePicker می‌پره و من دیگه دسترسی به DatePicker هم ندارم. به طور دقیق‌تر بعد از اینکه اطلاعات فیلدهای دیگه رو تغییر می‌دم، با کلیک بر روی input تاریخ، فرم DatePicker تنها تا زمانی که MouseDown باشد نمایش داده می‌شود و امکان انتخاب تاریخ وجود ندارد، و تنها امکان تایپ تاریخ وجود داره.
با توجه به ظاهر قضایا گفتم شاید مشکل از فانکشن update باشه که تنها کد زیر درون اون قرار داره:

public function updated($propertyName){
    $this->validateOnly($propertyName);
}

اما حتی با حذف کامل این فانکشن هم چیزی تغییر نکرد.
این تکه کد input من هست:

<input wire:model.lazy="a_birthdate" name="a_birthdate" class="indate input-text @error('a_birthdate') input-text-error @enderror" type="text" placeholder="1400-01-01">

این بخش هم تکه کد اسکریپتی که برای DatePicker استفاده کردم:

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $(".indate").pDatepicker({
                observer: true,
                format: 'YYYY-MM-DD',
                locale: 'en',
                altField: '.observer-example-alt'
            });
        });
    </script>
@endpush

ممنون می‌شم نظر شما عزیزان رو بدونم. اشتباه من کجا بوده یا اگر روش بهتری می‌دونید ممنون میشم راهنمایی کنید. چون الان عملاً این DatePicker با این وضعیت به هیچ کاری نمیاد.
سپاس از لطفتون

ثبت پرسش جدید

پاسخ‌ها

11
محمد رضا
محمد رضا
@salar.mohammad2013

تخصص: Full Stack Developer

سلام
احتمال داره وقتی بقیه فیلد ها تغییری میکنن و صفحه رندر میشه a_birthdate مقداری نداره و چون توی palace holder شما مقدار بهش دادی میاد خالی میکنه ورودی تاریخ شما رو از ignore یا مقدار دهی اولیه اون فیلد استفاده کن و تست کن
چون احتمالا مشکل شما فقط با livewire باید باشه و در حالت عادی فرض میگیریم درست کار کنه.

البته بگم من خودم دو سه روزه شروع کردم لایوایر رو و دورشو دیدم کامل و تجربه ی زیادی ندارم
چیزی ک ب ذهنم میرسه این هست
امیدوارم کمکتون کنه

رامتین علمداری
رامتین علمداری
@RamtinA

@salar.mohammad2013
ممنون از پاسخ شما بله یکی از مشکلات این هست که مقدارها در متغیر قرار نمی‌گیره ( که البته با قراردادن onSelect در جاوا اسکریپت میشه تاریخ به فرمت unix رو به متغیر پاس داد).
اما همچنان مشکل پابرجاست و بلافاصله بعد از اینکه یکی دیگه از ورودی‌های فرم رو تغییر بدید دیگه DatePicker درست کار نمیکنه و فقط برای یک لحظه باز و بسته می‌شه. (‌یه نکته جالب وقتی فیلد تاریخ رو select کنید بعد از اینکه DatePicker باز و بسته شد اگر به یک تب دیگه در مرورگر برید و باز به تب قبلی برگردید DatePicker باز هست و کار هم میکنه 😁😁 )
من که فعلا مجبور شدم یه ورودی ساده بگیرم و بعد اون رو تبدیل به Date کنم. تا شاید بعدا سر فرصت یا با کمک دوستان در این وبسایت مشخص شد اشکال کار کجاست.

شاید پاسخ شما همین‌جا باشد

محمد رضا
محمد رضا
@salar.mohammad2013

تخصص: Full Stack Developer

@RamtinA
خیلی هم عالی
من گفتگو دنبال کردم اما اگر پاسخی پیدا کردید خوشحال میشم مطرح کنید اینجا

علی اکبری
علی اکبری
@jpro.feri

تخصص: بک اند

https://laravel-livewire.com/screencasts/s4-date-picker

این ویدئو کار با pikaday و لایووایر رو توضیح داده و moment.js و momentjalali.js هم میتونین بهpikaday اضافه کنین که فارسی بشه .
بعد از اون دیگه مشکلی در ارسال تاریخ فارسی در لایووایر ندارین

سینا خاقانی
سینا خاقانی
@sina.it91

تخصص: توسعه دهنده بک‌اند

@RamtinA
کسانی که به چنین مشکلی برخوردن این پست رو مطالعه کنن. احتمالا مشکلتون رفع میشه

https://virgool.io/@sina.it91/%D8%B1%D9%81%D8%B9-%D9%85%D8%B4%DA%A9%D9%84-datepicker-%D8%AF%D8%B1-livewire-cyj0qa5ki9gr

سهیل رضایی
سهیل رضایی
@rezaesoheil

اگر از alpine استفاده کنی به راحتی میشه استفاده کرد از persian datepicker بدون این که توی آپدیت DOM این مشکل پیش بیاد.
مهمترین مزیتی هم که alpine ایجاد میکنه نسبت به بقیه روش ها اینه که میتونی از defer روی اینپوتت استفاده کنی

میلاد خسروی
میلاد خسروی
@milwad

تخصص: برنامه نویس بامزه

علی
علی
@Alitavil

سلام
لطفاً اگر ممکنه و نمونه کدی دارید بگذارید ممنون میشم

سینا شاه‌اویسی
سینا شاه‌اویسی
@sinashahoveisi

تخصص: برنامه نویس

سلام این مقاله میتونه کمکتون کنه

محمد صادقیان
محمد صادقیان
@drcode.ir

تخصص: برنامه نویس وب - فریم ورک Laravel

$('.start-date').persianDatepicker({
            observer: true,
            initialValueType: 'persian',
            format: 'YYYY/MM/DD',
            initialValue: false,
            autoClose: true,
            onSelect: function(unix){
                @this.set('datas.start_at', new persianDate(unix).format('YYYY/MM/DD'), true);
            }
        });

این مشکلت رو حل میکنه

محسن
محسن
@vb.mohsen2

خیلی ممنون خیلی بهم کمک گکردین خیلی رو جاوا اسکریپتم باید کار کنم

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام