### Initialize Development Environment Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/CONTRIBUTING.md Commands to clone the repository and install all necessary PHP and Node.js dependencies. ```bash # 1. Clone the repository git clone https://github.com/malzariey/filament-daterangepicker-filter.git cd filament-daterangepicker-filter # 2. Install PHP dependencies composer install # 3. Install Node dependencies npm install # 4. Build front-end assets npm run build ``` -------------------------------- ### Install Filament Date Range Picker Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Install the package using Composer. ```bash composer require malzariey/filament-daterangepicker-filter ``` -------------------------------- ### Run Demo Application Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/CONTRIBUTING.md Commands to start the asset watcher and the PHP development server for the demo application. ```bash npm run dev ``` ```bash vendor/bin/testbench serve ``` -------------------------------- ### Set Default Start and End Dates Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure the initial start and end dates for the date range picker using Carbon instances or predefined shortcuts. ```php DateRangePicker::make('created_at') ->startDate(Carbon::now()) ->endDate(Carbon::now()) // Or use shortcuts: DateRangePicker::make('created_at')->defaultToday() DateRangePicker::make('created_at')->defaultLast7Days() DateRangePicker::make('created_at')->defaultThisMonth() DateRangePicker::make('created_at')->defaultLastYear() ``` -------------------------------- ### Listen for Date Range Picker Events Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Handle custom events dispatched by the date range picker component for integration with Livewire or JavaScript. This example shows how to log start and end dates when the 'apply' event is triggered. ```javascript // Listen for date range changes document.addEventListener('apply.daterangepicker', (e) => { console.log('Start:', e.detail.startDate); console.log('End:', e.detail.endDate); console.log('Formatted:', e.detail.formattedValue); }); // Other available events document.addEventListener('cancel.daterangepicker', (e) => { /* ... */ }); document.addEventListener('show.daterangepicker', (e) => { /* ... */ }); document.addEventListener('hide.daterangepicker', (e) => { /* ... */ }); ``` -------------------------------- ### Use Dual State Mode for Date Range Picker Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure the date range picker to store start and end dates in separate Livewire properties. ```php DateRangePicker::make('date_range') ->useDualState('start_date', 'end_date'); // In your Livewire component: public ?string $start_date = null; public ?string $end_date = null; ``` -------------------------------- ### Field Setup for Date Range Picker Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Configure the DateRangePicker field with a specific format and enable auto-apply for immediate selection updates. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; // Field setup DateRangePicker::make('date_range') ->format('Y-m-d') ->autoApply() ``` -------------------------------- ### Enable Dual State Mode for Date Range Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Use dual state mode to store start and end dates in separate Livewire properties. This is useful for independent processing of date values. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; // In your form schema DateRangePicker::make('date_range') ->useDualState('start_date', 'end_date') ->format('Y-m-d') ``` ```php // In your Livewire component class CreateReport extends Component { public ?string $start_date = null; public ?string $end_date = null; public function save() { // Access dates separately $start = Carbon::parse($this->start_date); $end = Carbon::parse($this->end_date); Report::create([ 'start_date' => $start, 'end_date' => $end, ]); } } ``` -------------------------------- ### Configure Dropdown Positioning Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Control the dropdown's appearance relative to the input using DropDirection and OpenDirection enums. Examples show upward/center, downward/right, and auto-detection. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; use Malzariey\FilamentDaterangepickerFilter\Enums\DropDirection; use Malzariey\FilamentDaterangepickerFilter\Enums\OpenDirection; // Dropdown opens upward, aligned to center DateRangePicker::make('date') ->drops(DropDirection::UP) ->opens(OpenDirection::CENTER) // Dropdown opens downward (default), aligned to right DateRangePicker::make('date') ->drops(DropDirection::DOWN) ->opens(OpenDirection::RIGHT) // Auto-detect best position DateRangePicker::make('date') ->drops(DropDirection::AUTO) ->opens(OpenDirection::LEFT) ``` -------------------------------- ### Set Maximum Date Span Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Limit the maximum duration between the start and end dates that can be selected. ```php DateRangePicker::make('created_at') ->maxSpan(['months' => 1]) // days, months, or years ``` -------------------------------- ### Custom Query Modification Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Customize the database query using the `modifyQueryUsing` method to filter records based on the selected date range. This example filters by `created_at`. ```php use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter; DateRangeFilter::make('created_at') ->modifyQueryUsing(fn(Builder $query, ?Carbon $startDate, ?Carbon $endDate, $dateString) => $query->when(!empty($dateString), fn(Builder $query) => $query->whereBetween('created_at', [$startDate, $endDate]) ) ) ``` -------------------------------- ### Project Directory Structure Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/CONTRIBUTING.md Overview of the workbench directory structure for the demo application. ```text workbench/ ├── app/ │ ├── Filament/Pages/DemoPage.php # The demo page (form schema) │ └── Providers/ │ ├── Filament/DemoPanelProvider.php # Filament panel at /demo │ └── WorkbenchServiceProvider.php # Registers workbench views └── resources/views/filament/pages/ └── demo.blade.php # Blade template (LTR/RTL toggle, slide-over action) ``` -------------------------------- ### Configure Time Picker Options Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Enable the time picker and configure its behavior, including 24-hour format, seconds display, and time increments. ```php DateRangePicker::make('created_at') ->timePicker() ->timePicker24() // Use 24-hour format ->timePickerSecond() // Show seconds ->timePickerIncrement(30) // 30-minute increments ``` -------------------------------- ### Initialize DateRangePicker Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Basic initialization of the date range picker component. ```php DateRangePicker::make('created_at')->singleCalendar() ``` -------------------------------- ### Configure Date Range Picker for Month Selection Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Set the date picker to allow selection of entire months, formatting the output as 'Month Year'. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; DateRangePicker::make('billing_period') ->monthPicker() ->format('F Y'); ``` -------------------------------- ### Implement DateRangeFilter in Filament Tables Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Shows how to integrate DateRangeFilter into a Filament table, including custom query modifications and preset configurations. ```php use Malzariey\filamentDaterangepickerFilter\Filters\DateRangeFilter; use Illuminate\Database\Eloquent\Builder; use Carbon\Carbon; // Basic usage in table filters public static function table(Table $table): Table { return $table ->columns([ TextColumn::make('name'), TextColumn::make('created_at')->dateTime(), ]) ->filters([ // Simple filter DateRangeFilter::make('created_at'), // Filter with custom query DateRangeFilter::make('order_date') ->label('Order Period') ->format('Y-m-d') ->defaultLast30Days() ->withIndicator() ->modifyQueryUsing(function ( Builder $query, ?Carbon $startDate, ?Carbon $endDate, $dateString ) { return $query->when( !empty($dateString), fn (Builder $q) => $q ->whereBetween('order_date', [$startDate, $endDate]) ->where('status', 'completed') ); }), // Filter with presets and hidden label DateRangeFilter::make('updated_at') ->hiddenLabel() ->placeholder('Select date range') ->ranges([ 'Last 7 Days' => [now()->subDays(6), now()], 'Last Month' => [now()->subMonth()->startOfMonth(), now()->subMonth()->endOfMonth()], ]) ->disableClear(), ]); } ``` -------------------------------- ### Use Range Labels Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Enable the display of preset labels instead of dates for predefined ranges. ```php DateRangePicker::make('created_at')->useRangeLabels() ``` -------------------------------- ### Execute PHP Tests Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/CONTRIBUTING.md Commands to run the Pest test suite. ```bash composer test # or: vendor/bin/pest ``` -------------------------------- ### Configure Month and Year Picker Modes Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Set the picker mode to 'month' or 'year' for selecting entire months or years. Use the 'format' option to control the display string. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; use Malzariey\FilamentDaterangepickerFilter\Enums\PickerType; // Month picker - select entire months DateRangePicker::make('billing_period') ->monthPicker() ->format('F Y') // e.g., "January 2024 - March 2024" ``` ```php // Year picker - select entire years DateRangePicker::make('fiscal_years') ->yearPicker() ->format('Y') // e.g., "2023 - 2025" ->minYear(2020) ->maxYear(2030) ``` ```php // Using enum directly DateRangePicker::make('period') ->pickerType(PickerType::MONTH) ``` -------------------------------- ### Configure Time Picker Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Enable and configure the time picker for date range selection. Supports 12/24 hour formats, seconds, and custom minute increments. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; // Basic time picker (12-hour format) DateRangePicker::make('appointment') ->timePicker() ->format('d/m/Y h:i A') // e.g., "25/12/2024 02:30 PM" ``` ```php // 24-hour format with seconds DateRangePicker::make('log_period') ->timePicker() ->timePicker24() ->timePickerSecond() ->format('Y-m-d H:i:s') // e.g., "2024-12-25 14:30:45" ``` ```php // Custom minute increments (15-minute intervals) DateRangePicker::make('meeting_time') ->timePicker() ->timePicker24() ->timePickerIncrement(15) ``` -------------------------------- ### Execute JavaScript Tests Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/CONTRIBUTING.md Commands to run Vitest in single-run or watch mode. ```bash npm test # single run npm run test:watch # watch mode ``` -------------------------------- ### Define Predefined Ranges Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure predefined date ranges for quick selection, such as 'Today', 'This Week', or 'Last 30 Days'. ```php DateRangePicker::make('created_at') ->ranges([ 'Today' => [now(), now()], 'This Week' => [now()->startOfWeek(), now()->endOfWeek()], 'Last 30 Days' => [now()->subDays(30), now()], ]) ``` -------------------------------- ### Publish Translations Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Optionally publish translation files for localization. ```bash php artisan vendor:publish --tag="filament-daterangepicker-filter-translations" ``` -------------------------------- ### Enable Month/Year Dropdowns Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Allow users to select months and years directly from dropdowns within the date picker interface. You can also set min/max years. ```php DateRangePicker::make('created_at') ->showDropdowns() ->minYear(2000) ->maxYear(2030) ``` -------------------------------- ### Configure DateRangePicker Field Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Demonstrates basic and advanced configuration for the DateRangePicker form field, including presets, constraints, and UI behavior settings. ```php use Malzariey ilamentDaterangepickerFilter\Fields\DateRangePicker; use Malzariey\filamentDaterangepickerFilter\Enums\DropDirection; use Malzariey\filamentDaterangepickerFilter\Enums\OpenDirection; use Carbon\Carbon; // Basic usage DateRangePicker::make('created_at') // Full configuration example DateRangePicker::make('report_period') ->label('Report Period') ->format('d/m/Y') // PHP Carbon format (auto-converts to JS) ->timezone('UTC') ->startDate(Carbon::now()->subDays(30)) ->endDate(Carbon::now()) ->minDate(Carbon::now()->subYear()) ->maxDate(Carbon::now()->addMonth()) ->firstDayOfWeek(1) // Monday ->ranges([ 'Today' => [now(), now()], 'This Week' => [now()->startOfWeek(), now()->endOfWeek()], 'Last 30 Days' => [now()->subDays(30), now()], 'This Quarter' => [now()->startOfQuarter(), now()->endOfQuarter()], ]) ->autoApply() // Apply selection immediately ->singleCalendar() // Show one calendar instead of two ->drops(DropDirection::DOWN) ->opens(OpenDirection::LEFT) ->showWeekNumbers() ->showDropdowns() // Month/year dropdowns ->minYear(2020) ->maxYear(2030) ->disabledDates(['2024-12-25', '2024-12-26']) ->maxSpan(['months' => 3]) // Limit selection span ->useRangeLabels() // Show preset label instead of dates ->allowInput() // Enable keyboard date entry ->teleport() // Teleport dropdown to body (modal compatible) ``` -------------------------------- ### Configure Date Range Picker for Year Selection Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure the date picker to select entire years, specifying minimum and maximum selectable years. ```php DateRangePicker::make('fiscal_years') ->yearPicker() ->format('Y') ->minYear(2020) ->maxYear(2030); ``` -------------------------------- ### Set First Day of Week Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Customize the first day of the week displayed in the date picker calendar. ```php DateRangePicker::make('created_at')->firstDayOfWeek(1) // Monday ``` -------------------------------- ### Enable Keyboard Input for Date Range Picker Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Allow users to type dates directly into the date range picker, with built-in format validation. ```php DateRangePicker::make('dates') ->allowInput(); // Enable keyboard entry with format validation ``` -------------------------------- ### Set Minimum and Maximum Dates Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Define the allowable range for date selection by setting minimum and maximum dates. ```php DateRangePicker::make('created_at') ->minDate(Carbon::now()->subMonth()) ->maxDate(Carbon::now()->addMonth()) ``` -------------------------------- ### Define Custom Predefined Ranges Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Create custom predefined date ranges that appear in the picker's sidebar for quick selection. Options to display range labels or disable ranges entirely. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; DateRangePicker::make('analytics_period') ->ranges([ 'Today' => [now(), now()], 'Yesterday' => [now()->subDay(), now()->subDay()], 'Last 7 Days' => [now()->subDays(6), now()], 'Last 14 Days' => [now()->subDays(13), now()], 'Last 30 Days' => [now()->subDays(29), now()], 'This Month' => [now()->startOfMonth(), now()->endOfMonth()], 'Last Month' => [now()->subMonth()->startOfMonth(), now()->subMonth()->endOfMonth()], 'This Quarter' => [now()->startOfQuarter(), now()->endOfQuarter()], 'This Year' => [now()->startOfYear(), now()->endOfYear()], ]) ->useRangeLabels() // Display "Last 7 Days" instead of "12/18/2024 - 12/24/2024" ``` ```php // Disable predefined ranges entirely DateRangePicker::make('custom_date') ->disableRanges() ``` ```php // Disable custom range selection (only allow predefined ranges) DateRangePicker::make('preset_only') ->disableCustomRange() ``` -------------------------------- ### Show Week Numbers Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Enable the display of week numbers in the calendar. Supports both localized and ISO week numbers. ```php DateRangePicker::make('created_at') ->showWeekNumbers() // Localized week numbers ->showISOWeekNumbers() // ISO week numbers ``` -------------------------------- ### Enable Auto Apply for Date Range Picker Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure the date range picker to automatically apply the selected range without requiring an explicit 'Apply' button click. ```php DateRangePicker::make('created_at')->autoApply() ``` -------------------------------- ### Set Default Date Presets Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Utilize built-in methods to set common default date ranges like 'today', 'last 7 days', 'this month', etc. Custom defaults can be set using Carbon dates. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; use Carbon\Carbon; // Today DateRangePicker::make('date')->defaultToday() ``` ```php // Yesterday DateRangePicker::make('date')->defaultYesterday() ``` ```php // Last 7 days DateRangePicker::make('date')->defaultLast7Days() ``` ```php // Last 30 days DateRangePicker::make('date')->defaultLast30Days() ``` ```php // This month DateRangePicker::make('date')->defaultThisMonth() ``` ```php // Last month DateRangePicker::make('date')->defaultLastMonth() ``` ```php // This year DateRangePicker::make('date')->defaultThisYear() ``` ```php // Last year DateRangePicker::make('date')->defaultLastYear() ``` ```php // Custom default using Carbon dates DateRangePicker::make('date') ->startDate(Carbon::now()->subDays(14)) ->endDate(Carbon::now()) ``` ```php // Custom default with enforce on null (applies default even when editing null values) DateRangePicker::make('date') ->defaultLast30Days(enforceIfNull: true) ``` -------------------------------- ### Set Drop and Open Directions Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Control the direction in which the date range picker dropdown appears relative to the input element. ```php use Malzariey\FilamentDaterangepickerFilter\Enums\DropDirection; use Malzariey\FilamentDaterangepickerFilter\Enums\OpenDirection; DateRangePicker::make('created_at') ->drops(DropDirection::UP) ->opens(OpenDirection::CENTER) ``` -------------------------------- ### Use DateRangeFilter as a Filter Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Implement the DateRangeFilter for filtering records in Filament tables. ```php use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter; DateRangeFilter::make('created_at'), ``` -------------------------------- ### Set Display Format Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Set the display format for the date range picker using PHP Carbon tokens. The format is automatically converted for JavaScript display. ```php DateRangePicker::make('created_at') ->format('d/m/Y') ``` ```php DateRangePicker::make('created_at') ->format('Y-m-d') ``` ```php DateRangePicker::make('created_at') ->format('d M Y') ``` -------------------------------- ### Use DateRangePicker as a Field Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Integrate the DateRangePicker as a form field in your Filament application. ```php use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker; DateRangePicker::make('created_at'), ``` -------------------------------- ### DateRangePicker Configuration Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Methods to customize the appearance and behavior of the DateRangePicker component. ```APIDOC ## DateRangePicker Configuration ### Description Methods to customize the DateRangePicker component, including calendar display, date formatting, and UI constraints. ### Methods - **singleCalendar()**: Enables a single calendar view. - **disabledDates(array $dates)**: Disables specific dates. - **format(string $format)**: Sets the date format using PHP Carbon tokens. - **ranges(array $ranges)**: Defines predefined date ranges. - **useRangeLabels()**: Displays preset labels instead of dates. - **disableCustomRange()**: Disables the ability to select custom ranges. - **drops(DropDirection $direction)**: Sets the dropdown direction. - **opens(OpenDirection $direction)**: Sets the opening direction. - **maxSpan(array $span)**: Limits the maximum date range span. - **showWeekNumbers()**: Displays localized week numbers. - **showISOWeekNumbers()**: Displays ISO week numbers. - **showDropdowns()**: Enables month/year dropdowns. ``` -------------------------------- ### Enable/Disable Teleport for Modals Source: https://context7.com/malzariey/filament-daterangepicker-filter/llms.txt Use the 'teleport' method to enable or disable rendering the dropdown at the document root, which is useful for modal and slide-over compatibility. Teleport is enabled by default. ```php // Enable teleport for modal/slide-over compatibility (enabled by default) DateRangePicker::make('date') ->teleport() // Renders dropdown at document root to avoid z-index issues // Disable teleport if needed DateRangePicker::make('date') ->teleport(false) ``` -------------------------------- ### Configure Date Range Picker Timezone Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Set the timezone for the date range picker. ```php DateRangePicker::make('created_at')->timezone('UTC') ``` -------------------------------- ### Display Filter Indicator Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Enable a visual indicator on the filter to show that a date range filter is active. ```php DateRangeFilter::make('created_at')->withIndicator() ``` -------------------------------- ### DateRangeFilter Customization Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Methods for customizing the behavior of the DateRangeFilter within Filament tables. ```APIDOC ## DateRangeFilter Customization ### Description Methods to modify the query logic and display indicators for the DateRangeFilter. ### Methods - **modifyQueryUsing(callable $callback)**: Customizes the Eloquent query based on selected dates. - **withIndicator()**: Enables the filter indicator in the table header. ``` -------------------------------- ### Configure Date Range Picker Teleport Behavior Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Control whether the date picker dropdown teleports to the body to avoid z-index issues. It is enabled by default. ```php DateRangePicker::make('dates') ->teleport(); // Enabled by default DateRangePicker::make('dates') ->teleport(false); // Disable if needed ``` -------------------------------- ### Disable Specific Dates Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Configure the date range picker to disable selection of specific dates. ```php DateRangePicker::make('created_at') ->disabledDates(['2024-12-25', '2024-12-26']) ``` -------------------------------- ### Disable Custom Range Selection Source: https://github.com/malzariey/filament-daterangepicker-filter/blob/x5/README.md Prevent users from selecting custom date ranges, forcing them to use predefined options if available. ```php DateRangePicker::make('created_at')->disableCustomRange() ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.