Datepicker Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require contao-components/datepicker
   

   Ensure contao-components/datepicker is added to require in composer.json.

2. Basic Usage in Blade Include the CSS/JS assets in your layout file (e.g., resources/views/layouts/app.blade.php):

   <link href="{{ asset('vendor/contao-components/datepicker/css/datepicker.css') }}" rel="stylesheet">
   <script src="{{ asset('vendor/contao-components/datepicker/js/datepicker.js') }}"></script>
   

3. First Implementation Add a date input field in a Blade view:

   <input type="text" id="event-date" name="event_date" class="datepicker">
   

   Initialize the datepicker via JavaScript:

   document.addEventListener('DOMContentLoaded', function() {
       new Datepicker(document.getElementById('event-date'));
   });
   

   Or use jQuery (if included):

   $(document).ready(function() {
       $('.datepicker').datepicker();
   });
   

4. Laravel Form Integration Use the package with Laravel Collective or native forms:

   {{ Form::text('event_date', null, ['class' => 'datepicker']) }}
   

   Or:

   <input type="text" name="event_date" class="datepicker" value="{{ old('event_date') }}">
   

Implementation Patterns

Common Workflows

1. Dynamic Initialization Initialize datepickers for multiple fields dynamically:

   document.querySelectorAll('.datepicker').forEach(input => {
       new Datepicker(input);
   });
   

2. Form Request Validation Validate dates in Laravel Form Requests:

   public function rules()
   {
       return [
           'event_date' => 'required|date_format:Y-m-d',
       ];
   }
   

3. Localization Set locale via JavaScript:

   new Datepicker(document.getElementById('event-date'), {
       locale: 'de-DE',
   });
   

   Or configure globally (if supported):

   Datepicker.setDefaultOptions({ locale: 'fr-FR' });
   

4. Integration with Laravel Livewire Use Alpine.js or Livewire events to trigger initialization:

   document.addEventListener('livewire:init', () => {
       new Datepicker(document.getElementById('livewire-date'));
   });
   

5. Custom Date Ranges Restrict date selection in forms:

   new Datepicker(document.getElementById('start-date'), {
       minDate: new Date(),
       maxDate: new Date('2025-12-31'),
   });
   

6. AJAX-Driven Forms Use the datepicker with AJAX submissions:

   $('.datepicker-form').on('submit', function(e) {
       e.preventDefault();
       const date = $('.datepicker').val();
       // Send date via AJAX
   });
   

7. Laravel Nova Customization Extend Nova fields (if applicable):

   use Contao\Datepicker\Datepicker;
   
   public function fields(Request $request)
   {
       return [
           Text::make('Event Date')
               ->onlyOnDetail()
               ->asHtml()
               ->script(<<<JS
                   new Datepicker(document.getElementById('field_event_date'));
               JS),
       ];
   }
   

Gotchas and Tips

Pitfalls

1. Asset Paths

   • Ensure vendor/contao-components/datepicker/ exists. If using a custom install path, update asset paths in Blade.
   • Fix: Verify composer.json and run composer dump-autoload.

2. Conflicting Libraries

   • jQuery conflicts may arise if both jQuery and vanilla JS are used.
   • Fix: Use .noConflict() or prefer vanilla JS initialization.

3. Locale Mismatches

   • Default locale may not match user expectations (e.g., en-US vs. en-GB).
   • Fix: Explicitly set locale in initialization.

4. Server-Side Validation

   • Client-side datepickers don’t validate server-side rules. Always validate in Laravel.
   • Fix: Use required|date in Form Requests.

5. Caching Issues

   • Stale JS/CSS files may cause rendering issues.
   • Fix: Clear cache (php artisan cache:clear) or use versioned assets.

6. Mobile Responsiveness

   • Some mobile browsers may not render the datepicker correctly.
   • Fix: Test on target devices or use a fallback (e.g., native <input type="date">).

Debugging Tips

1. Console Errors Check browser console for missing files or JS errors. Common issues:

   • Uncaught ReferenceError: Datepicker is not defined → Asset not loaded.
   • Failed to load resource → Incorrect path in Blade.

2. Inspect Initialization Verify the datepicker is initialized:

   console.log(document.getElementById('event-date').classList.contains('datepicker'));
   

3. Disable for Testing Temporarily remove the datepicker class to isolate issues:

   <input type="text" id="event-date" name="event_date" class="{{ false ? 'datepicker' : '' }}">
   

Extension Points

1. Custom Themes Override CSS by extending the default stylesheet:

   /* resources/css/app.css */
   .datepicker-custom {
       background: #f0f0f0;
   }
   

   Then add a class to the input:

   <input type="text" class="datepicker datepicker-custom">
   

2. Event Listeners Attach callbacks for date selection:

   new Datepicker(document.getElementById('event-date'), {
       onSelect: function(date) {
           console.log('Selected:', date);
           // Trigger Laravel event or AJAX call
       }
   });
   

3. Laravel Mix/Webpack Process assets for production:

   // webpack.mix.js
   mix.copy('node_modules/contao-components/datepicker/css', 'public/vendor/datepicker/css');
   mix.copy('node_modules/contao-components/datepicker/js', 'public/vendor/datepicker/js');
   

4. Server-Side Date Handling Parse dates in Laravel:

   $date = \Carbon\Carbon::parse($request->input('event_date'));
   

   Or use Carbon’s createFromFormat for custom formats.

5. Accessibility Ensure ARIA attributes are present:

   <input type="text" aria-label="Event date" class="datepicker">
   

   Or extend the package’s JS to add ARIA roles dynamically.