adtention / nova-datepicker-filter
A Laravel Nova date field built as a thin wrapper around vuepic/vue-datepicker.
Package info
github.com/adtention/nova-datepicker-filter
pkg:composer/adtention/nova-datepicker-filter
Requires
- php: ^8.4
- illuminate/support: ^10.0|^11.0|^12.0|^13.0
Requires (Dev)
- laravel/nova: ^5.0
- laravel/nova-devtool: ^1.7
- orchestra/testbench: ^9.0|^10.0|^11.0
- phpunit/phpunit: ^11.0|^12.0|^13.0
README
A Laravel Nova date filter built as a thin wrapper around @vuepic/vue-datepicker.
| Compatibility | Version |
|---|---|
| Laravel Nova | ^5.0 |
| PHP | ^8.4 |
Installation
composer require adtention/nova-datepicker-filter
Usage
Create a filter class that extends Adtention\DatepickerFilter\DatepickerFilter, then register it in your Nova resource.
<?php namespace App\Nova\Filters; use Adtention\DatepickerFilter\DatepickerFilter; use Illuminate\Contracts\Database\Eloquent\Builder; use Laravel\Nova\Http\Requests\NovaRequest; class CreatedAt extends DatepickerFilter { public function apply(NovaRequest $request, Builder $query, mixed $value): Builder { if (empty($value)) { return $query; } return $query->whereDate('created_at', $value); } }
Register the filter in your resource:
<?php use App\Nova\Filters\CreatedAt; public function filters(NovaRequest $request): array { return [ CreatedAt::make() ->single() ->placeholder('Created on') ->locale('en'), ]; }
Range filter ([start, end])
In range mode, the filter value passed to apply() is an array with two values:
$value[0]= start date (YYYY-MM-DDornull)$value[1]= end date (YYYY-MM-DDornull)
<?php namespace App\Nova\Filters; use Adtention\DatepickerFilter\DatepickerFilter; use Illuminate\Contracts\Database\Eloquent\Builder; use Laravel\Nova\Http\Requests\NovaRequest; class CreatedBetween extends DatepickerFilter { public function apply(NovaRequest $request, Builder $query, mixed $value): Builder { [$from, $to] = is_array($value) ? $value : [null, null]; return $query ->when($from, fn (Builder $query) => $query->whereDate('created_at', '>=', $from)) ->when($to, fn (Builder $query) => $query->whereDate('created_at', '<=', $to)); } }
Usage in resource:
CreatedBetween::make() ->range() ->rangePlaceholders('From date', 'To date') ->locale('de');
Available fluent methods
single()→ single date mode (default)range()→ range modemode(DatepickerFilter::MODE_SINGLE | DatepickerFilter::MODE_RANGE)locale('da')placeholder('Choose date')(single mode)startPlaceholder('Start')/endPlaceholder('End')rangePlaceholders('Start', 'End')
Supported scope
This package is intentionally lightweight for public package use: it wraps @vuepic/vue-datepicker for Nova, but does not expose the full upstream prop/slot API.
- Input is normalized to
YYYY-MM-DDbefore submission. - The UI automatically follows Nova light/dark mode styling.
- Advanced vue-datepicker features (for example custom slots, full range/time presets, and all component props) are not guaranteed to be configurable via PHP at this time.
If you need additional functionality, pull requests are welcome as long as the API stays Nova-friendly.
Development
Build for local environment:
git clone https://github.com/adtention/nova-datepicker-filter.git
cd nova-datepicker-filter
composer install
npm install
npm run dev
Build for release:
npm run prod
Run tests:
php vendor/bin/phpunit
Run a specific test:
php vendor/bin/phpunit --filter=it_defaults_locale_meta_to_the_application_locale
License
MIT
Credits
Developed by Adtention A/S