Fluxui Persian Date Picker Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require aliqasemzadeh/fluxui-persian-date-picker
   

   No manual service provider registration needed (Laravel auto-discovers it).

2. Tailwind Configuration: Update tailwind.config.js to include the package’s views:

   content: [
       './vendor/aliqasemzadeh/fluxui-persian-date-picker/resources/views/**/*.blade.php',
       // ... other paths
   ],
   

3. First Use Case: Drop the component in a Livewire blade view:

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

   Ensure your Livewire component has a public $birthDate property.

Implementation Patterns

Core Workflow

1. Livewire Integration:

   • Use wire:model for two-way binding (e.g., wire:model="eventDate").
   • Supports wire:model.live and wire:model.blur for real-time validation or delayed updates.

2. Form Handling:

   <form wire:submit.prevent="saveEvent">
       <x-persian-date-picker
           label="تاریخ رویداد"
           wire:model="eventDate"
           required
       />
       <button type="submit">ذخیره</button>
   </form>
   

   In Livewire:

   public $eventDate;
   public function saveEvent() {
       $this->validate(['eventDate' => 'required']);
       // Convert to Gregorian if needed (e.g., using `jdate` package)
   }
   

3. Dynamic Props:

   • Pass dynamic labels/descriptions:

     <x-persian-date-picker
         :label="$user->birthdayLabel"
         wire:model="userBirthday"
     />
     

4. Alpine.js Extensions: Leverage Alpine.js for client-side logic (e.g., disable past dates):

   <x-persian-date-picker
       wire:model="expiryDate"
       x-data="{ minDate: '1400/01/01' }"
       x-init="$watch('wire:model', (value) => {
           if (value < minDate) $wire.set('expiryDate', null);
       })"
   />
   

5. Reusable Components: Create a wrapper component for consistency:

   <!-- resources/views/components/persian-date.blade.php -->
   <x-persian-date-picker
       :label="$label"
       wire:model="{{ $name }}"
       :required="$required"
   />
   

   Usage:

   <x-persian-date label="تاریخ شروع" name="startDate" />
   

Gotchas and Tips

Pitfalls

1. Date Format Mismatch:

   • The component expects Jalali (Persian) dates in Y/m/d format (e.g., 1400/05/10).
   • Gotcha: If you store dates in Gregorian (Y-m-d), convert them before passing to the component:

     // In Livewire
     public function mount() {
         $this->eventDate = \Jalali\Jalalian::fromGregorian($this->gregorianDate)->format('Y/m/d');
     }
     

2. Tailwind Classes Stripped:

   • Forgetting to add the package’s views to tailwind.config.js will strip custom Tailwind classes.
   • Fix: Run npx tailwindcss -i input.css -o output.css --watch after updating config.

3. Livewire Property Binding:

   • Ensure the Livewire property name matches the wire:model (case-sensitive).
   • Debug: Use {{ dd($this->property) }} to verify data flow.

4. Alpine.js Conflicts:

   • If using Alpine.js globally, ensure no duplicate x-data or x-init conflicts with the component’s internals.

Tips

1. Custom Validation: Add custom validation in Livewire:

   protected $rules = [
       'eventDate' => 'required|date_format:Y/m/d|after:1380/01/01',
   ];
   

2. Localization: Override labels dynamically:

   <x-persian-date-picker
       label="{{ __('custom.date_label') }}"
       placeholder="{{ __('custom.placeholder') }}"
   />
   

3. Styling: Customize via Tailwind or publish the view:

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

   Then modify resources/views/vendor/persian-date-picker/components/persian-date-picker.blade.php.

4. Performance: For large forms, lazy-load the component with Alpine.js:

   <div x-data="{ showPicker: false }">
       <button @click="showPicker = true">Select Date</button>
       <x-persian-date-picker
           x-show="showPicker"
           wire:model="lazyDate"
           @close="showPicker = false"
       />
   </div>
   

5. Debugging:

   • Check the network tab for Alpine.js errors (e.g., missing dependencies).
   • Verify the component’s published assets if styles are broken.

6. Extension Points:

   • Add Icons: Use Flux UI’s icon system:

     <x-persian-date-picker
         :icon="$showIcon ? 'heroicon-o-calendar' : null"
     />
     

   • Disable Dates: Use Alpine.js to filter dates:

     x-init="
         $wire.on('persianDatePickerInit', (picker) => {
             picker.minDate = '1400/01/01';
         });
     "