tweaks

packages/forms/docs/03-fields/08-date-time-picker.md

@@ -185,6 +185,19 @@ TimePicker::make('appointment_at')
 
 Datalists provide autocomplete options to users when they use the picker. However, these are purely recommendations, and the user is still able to type any value into the input. If you're looking to strictly limit users to a set of predefined options, check out the [select field](select).
 
+### Focusing a default calendar date
+
+By default, if the field has no state, opening the calendar panel will open the calendar at the current date. This might not be convenient for situations where you want to open the calendar on a specific date instead. You can use the `defaultFocusedDate()` to set a default focused date on the calendar:
+
+```php
+use Filament\Forms\Components\DatePicker;
+
+DatePicker::make('custom_starts_at')
+    ->native(false)
+    ->placeholder(now()->startOfMonth())
+    ->defaultFocusedDate(now()->startOfMonth())
+```
+
 ## Adding affix text aside the field
 
 You may place text before and after the input using the `prefix()` and `suffix()` methods:
@@ -259,16 +272,3 @@ DatePicker::make('date_of_birth')
     ->minDate(now()->subYears(150))
     ->maxDate(now())
 ```
-
-### Focusing a default calendar date
-
-By default, if the field has no state, opening the calendar panel will open the calendar at the current date. This might not be convenient for situations where you want to open the calendar on a specific date instead. You can use the `defaultFocusedDate()` to set a default focused date on the calendar.
-
-```php
-use Filament\Forms\Components\DatePicker;
-
-DatePicker::make('custom_starts_at')
-    ->native(false)
-    ->placeholder(now()->startOfMonth())
-    ->defaultFocusedDate(now()->startOfMonth())
-```

packages/forms/resources/js/components/date-time-picker.js

@@ -14,13 +14,13 @@ dayjs.extend(utc)
 window.dayjs = dayjs
 
 export default function dateTimePickerFormComponent({
+    defaultFocusedDate,
     displayFormat,
     firstDayOfWeek,
     isAutofocused,
     locale,
     shouldCloseOnDateSelection,
     state,
-    defaultFocusedDate,
 }) {
     const timezone = dayjs.tz.guess()
 

packages/forms/resources/views/components/date-time-picker.blade.php

@@ -74,6 +74,7 @@
                 @endif
                 x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('date-time-picker', 'filament/forms') }}"
                 x-data="dateTimePickerFormComponent({
+                            defaultFocusedDate: @js($defaultFocusedDate),
                             displayFormat:
                                 '{{ convert_date_format($getDisplayFormat())->to('day.js') }}',
                             firstDayOfWeek: {{ $getFirstDayOfWeek() }},
@@ -81,7 +82,6 @@
                             locale: @js($getLocale()),
                             shouldCloseOnDateSelection: @js($shouldCloseOnDateSelection()),
                             state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
-                            defaultFocusedDate: @js($defaultFocusedDate),
                         })"
                 wire:ignore
                 wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.{{