Laravel nova tool - add datepicker

Question

I create a nova tool and need to have a datepicker.

In order to see the Nova datepicker, I did the following:
I added to User migration file:

$table->date('birthday')->nullable();

And reflected it in User.php and Nova\User.php:

public static $search = [
    'id', 'name', 'email', 'birthday'
];

public function fields(Request $request)
{
    return [
           :
           :
        Date::make('birthday')
            ->sortable(),

    ];
}

I got a nice datepicker:

Now I would like to have the same in my tool, but cannot manage to attach it to the date field.

By-the-way, the date field in user form has the following html:

<input data-v-d0bd8056="" dusk="birthday" name="birthday"
       type="text" placeholder="2018-10-25" 
       class="w-full form-control form-input form-input-bordered flatpickr-input active">

Any help? Thanks!

score 3 · Accepted Answer · answered Oct 25 '18 at 12:38

Ok, got it!

I found the flatpicker component page and followed the installation and usage instructions.

Then in order to have it nicely formed:

<flat-pickr v-model="fromDate" class="form-control form-input form-input-bordered datepicker-field"></flat-pickr>

And in <style> tag I added:

.datepicker-field {
    cursor: pointer !important;
    background-color: white !important;
}

Clean and easy!

Laravel nova tool - add datepicker

1 Answers1