Due Date: Can't Use Shadcn Date Picker

Now, let's try to add one more field to our form and database: due_date with a date picker.

Prepare Database/Controller

I will just show you the code without any comments. These are Laravel fundamentals, I'm sure you know them.

Migration:

php artisan make:migration add_due_date_to_tasks_table

Schema::table('tasks', function (Blueprint $table) {
    $table->date('due_date')->nullable();
});

Then, we run:

php artisan migrate

Adding to Model fillables:

app/Models/Task.php:

class Task extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'name',
        'is_completed',
        'due_date',
    ];
 
    protected function casts(): array
    {
        return [
            'is_completed' => 'boolean',
            'due_date' => 'date'
        ];
    }
}

Validation rules:

app/Http/Requests/StoreTaskRequest.php:

// ...
public function rules(): array
{
    return [
        'name' => ['required', 'string', 'max:255'],
        'due_date' => ['nullable', 'date'],
    ];
}

app/Http/Requests/UpdateTaskRequest.php:

public function rules(): array
{
    return [
        'name' => ['required', 'string', 'max:255'],
        'is_completed' => ['required', 'boolean'],
        'due_date' => ['nullable', 'date'],
    ];
}

No modifications are needed for the Controller since we use $request->validated() to create/update tasks.

Ok, the back end is ready. It's time to dive into the JavaScript/TypeScript side.

Adding Field to TypeScript Types

We need to update our type in the file of all types:

resources/js/types/index.d.ts

export interface Task {
    id: number;
    name: string;
    is_completed: boolean;
    due_date?: string; 
    created_at: string;
    updated_at: string;
}

Also, in our Create.tsx page, we need to...