Courses

Vue Laravel 12 Starter Kit: CRUD Project

Due Date: Using Shadcn Vue Date Picker

Summary of this lesson:
- Add a `due_date` field to tasks with database integration
- Implement date picker with Shadcn Date Picker component
- Configure TypeScript types and date formatting
- Display and edit dates in task listing and forms

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...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (82 min read)

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord