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_tableSchema::table('tasks', function (Blueprint $table) { $table->date('due_date')->nullable();});Then, we run:
php artisan migrateAdding 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...