aliqasemzadeh/fluxui-persian-date-picker

Persian (Jalali) Date Picker Blade component for Laravel + Livewire 4 + Flux UI.

dev-main 2026-04-25 08:17 UTC

Requires

• php: ^8.2
• illuminate/support: ^11.0|^12.0|^13.0
• livewire/flux: ^1.0|^2.0
• livewire/livewire: ^4.0

MIT

• Ali Qasemzadeh

• flux
• laravel
• datepicker
• persian
• Jalali
• shamsi
• date-picker
• livewire
• fluxui

README

یک کامپوننت Blade برای انتخاب تاریخ شمسی (جلالی) که روی Laravel + Livewire 4 + Flux UI و Alpine.js کار می‌کند.

نویسنده: Ali Qasemzadeh — [e-mail]

نصب

composer require aliqasemzadeh/fluxui-persian-date-picker

ServiceProvider به‌صورت خودکار ثبت می‌شود (Laravel package auto-discovery).

پیش‌نیازها

• Laravel 11، 12 یا 13
• Livewire 4
• Flux UI (پکیج livewire/flux)
• Alpine.js (که معمولاً همراه Flux/Livewire لود می‌شود)
• Tailwind CSS

پیکربندی Tailwind

مسیر view های پکیج را به content در tailwind.config.js اضافه کنید تا کلاس‌ها پاک نشوند:

export default {
    content: [
        // ...
        './vendor/aliqasemzadeh/fluxui-persian-date-picker/resources/views/**/*.blade.php',
    ],
}

استفاده

<x-persian-date-picker
    label="تاریخ تولد"
    placeholder="انتخاب تاریخ"
    wire:model="birth_date"
    required
/>

نمونه

Propها

Prop	نوع	پیش‌فرض	توضیح
name	string	از wire:model گرفته می‌شود	نام فیلد
label	string	null	برچسب فیلد
placeholder	string	انتخاب تاریخ	متن placeholder
description	string	null	توضیح زیر برچسب
size	string	null	اندازهٔ ورودی Flux
required	bool	false	اجباری بودن
value	string	null	مقدار اولیه (Y-m-d میلادی)

از wire:model, wire:model.live, wire:model.blur پشتیبانی می‌شود.

انتشار view برای سفارشی‌سازی

php artisan vendor:publish --tag=persian-date-picker-views

سپس فایل را در مسیر resources/views/vendor/persian-date-picker/components/persian-date-picker.blade.php ویرایش کنید.

توسعهٔ محلی

در composer.json پروژهٔ مصرف‌کننده:

"repositories": [
    {
        "type": "path",
        "url": "../fluxui-persian-date-picker",
        "options": { "symlink": true }
    }
],
    "require": {
    "aliqasemzadeh/fluxui-persian-date-picker": "*"
}

و سپس:

composer require aliqasemzadeh/fluxui-persian-date-picker:*

مجوز

MIT