Datepicker Field for Laravel Nova
A Laravel Nova date field built as a thin wrapper around @vuepic/vue-datepicker.
| Compatibility | Version |
|---|---|
| Laravel Nova | ^5.0 |
| PHP | ^8.4 |
Installation
composer require adtention/nova-datepicker-fieldUsage
Use Datepicker like any other Nova field in your resource:
<?php
use Adtention\DatepickerField\Datepicker;
use Laravel\Nova\Http\Requests\NovaRequest;
public function fields(NovaRequest $request): array
{
return [
Datepicker::make('Start Date', 'start_date')
->rules(['nullable', 'date']),
Datepicker::make('End Date', 'end_date')
->rules(['required', 'date'])
->readonly(fn (NovaRequest $request): bool => $request->isUpdateOrUpdateAttachedRequest()),
];
}The field is a Nova-friendly wrapper around @vuepic/vue-datepicker and is designed for date-only values.
Datepicker extends Laravel\Nova\Fields\Date, so core Nova Date field features are supported.
More examples
Date-range validation:
<?php
use Adtention\DatepickerField\Datepicker;
use Laravel\Nova\Http\Requests\NovaRequest;
public function fields(NovaRequest $request): array
{
return [
Datepicker::make('Start Date')
->rules(['required', 'date']),
Datepicker::make('End Date')
->rules(['required', 'date', 'after_or_equal:start_date']),
];
}Using regular Nova field APIs on top of the datepicker:
Datepicker::make('Optional Date')
->rules(['nullable', 'date'])
->help('Leave empty if this date is not applicable.')
->readonly(fn (NovaRequest $request): bool => $request->isUpdateOrUpdateAttachedRequest());Using inherited Nova Date features:
Datepicker::make('Travel Date')
->min(now()->toDateString())
->max(now()->addYear()->toDateString())
->step(1)
->locale('da');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.
- Since the field extends Nova
Date, inherited Date-field behavior (for examplemin,max, andstep) remains available. - 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-field.git
cd nova-datepicker-field
composer install
npm install
npm run devBuild for release:
npm run prodRun tests:
php vendor/bin/phpunitRun a specific test:
php vendor/bin/phpunit --filter=it_defaults_locale_meta_to_the_application_localeLicense
MIT
Credits
Developed by Adtention A/S
