Intentando integrar con air-datepicker

app/Livewire/Cajas/Index.php

@@ -38,8 +38,8 @@ class Index extends Component
         $this->fecha = now()->format('Y-m-d');
         $this->caja = 1;
 
-        if (Turno::where('fecha', $this->fecha)->exists()) {
-            $this->turno = Turno::where('fecha', $this->fecha)->max('numero_turno') + 1;
+        if (Turno::where('fecha', now())->exists()) {
+            $this->turno = Turno::where('fecha', now())->max('numero_turno') + 1;
         } else {
             $this->turno = 1;
         }

package-lock.json

@@ -1,9 +1,12 @@
 {
-    "name": "zenithar",
+    "name": "app",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "air-datepicker": "^3.5.3"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.5.9",
                 "@tailwindcss/typography": "^0.5.16",
@@ -892,6 +895,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/air-datepicker": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.5.3.tgz",
+            "integrity": "sha512-Elf9gLhv/jidN1+TfeRJYMQRUfYx5apXw2dY5DuAMPRnNtQ4Iw9fTTJK772osmXSUB9xQ2Y8Q1Pt6pgBOQLPQw==",
+            "license": "MIT"
+        },
         "node_modules/ansi-regex": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",

package.json

@@ -17,5 +17,8 @@
         "postcss": "^8.4.31",
         "tailwindcss": "^3.1.0",
         "vite": "^6.0"
+    },
+    "dependencies": {
+        "air-datepicker": "^3.5.3"
     }
 }

resources/js/app.js

@@ -1 +1,20 @@
 import './bootstrap';
+import 'air-datepicker/air-datepicker.css';
+import {Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
+import AirDatepicker from "air-datepicker";
+import localeEs from 'air-datepicker/locale/es';
+
+Alpine.data('datepicker', () => ({
+    init() {
+        new AirDatepicker(this.$el, {
+            locale: localeEs,
+            autoClose: true,
+            buttons: 'clear',
+            onSelect: ({date}) => {
+                this.$el.dispatchEvent(new Event('input'));
+            }
+        })
+    }
+}))
+
+Livewire.start();

resources/views/components/layouts/app.blade.php

@@ -30,7 +30,7 @@
         {{ $slot }}
     </main>
 </div>
-@livewireScripts
+@livewireScriptConfig
 </body>
 
 </html>

resources/views/livewire/cajas/index.blade.php

@@ -9,7 +9,15 @@
     </div>
 
     <div class="flex mb-4">
-        <x-date label="Fecha" wire:model.live="searchFecha" helpers/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Fecha</span>
+            </div>
+            <input type="date" class="input input-bordered" wire:model.live="searchFecha"/>
+            @error('fecha')
+            <p class="text-sm text-error">{{ $message }}</p>
+            @enderror
+        </label>
     </div>
 
     <div class="overflox-x-auto">
@@ -54,7 +62,7 @@
                 <div class="label">
                     <span class="label-text">Fecha</span>
                 </div>
-                <input type="date" class="input input-bordered" wire:model="fecha"/>
+                <input type="date" class="input input-bordered" wire:model.live="fecha"/>
                 @error('fecha')
                 <p class="text-sm text-error">{{ $message }}</p>
                 @enderror