Date Picker with due_date Field

php artisan make:migration add_due_date_to_tasks_table

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

php artisan migrate

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

class Create extends Component
{
    #[Validate('required|string|max:255')]
    public string $name = '';
 
    #[Validate('nullable|date')]
    public null|string $due_date = null; 
 
    public function save(): void
    {
        $this->validate();
 
        Task::create([
            'name' => $this->name,
            'due_date' => $this->due_date, 
        ]);
 
        session()->flash('success', 'Task successfully created.');
 
        $this->redirectRoute('tasks.index', navigate: true);
    }
 
    // ...
}

class Edit extends Component
{
    #[Validate('required|string|max:255')]
    public string $name;
 
    #[Validate('nullable|boolean')]
    public bool $is_completed;
 
    #[Validate('nullable|date')]
    public null|string $due_date = null; 
 
    public Task $task;
 
    public function mount(Task $task): void
    {
        $this->task = $task;
        $this->name = $task->name;
        $this->is_completed = $task->is_completed;
        $this->due_date = $task->due_date?->format('Y-m-d'); 
    }
 
    public function save(): void
    {
        $this->validate();
 
        $this->task->update([
            'name'         => $this->name,
            'is_completed' => $this->is_completed,
            'due_date'     => $this->due_date, 
        ]);
 
        session()->flash('success', 'Task successfully updated.');
 
        $this->redirectRoute('tasks.index', navigate: true);
    }
 
    // ...
}