实作待办事项的第三天，今天把切换日期的功能做好就完成啦！！今天会透过路由传递日期像是这样 https://exmaple.com/todo?date=2021-09-20 来让页面显示对应日期的资料，也是专案中很常见的作法。

功能五、切换其他日期的待办事项

前端页面

一样也是从前端做起，因为前两天没有做到切换功能的画面，那就现在来做！只要放能够上一天、下一天的按钮，还有显示目前的日期就可以了。

<div class="mb-10 text-center">
    <button class="ui button">前一天</button>
    <span class="mx-10 text-lg font-bold">2021-09-23</span>
    <button class="ui button">後一天</button>
</div>

後端

今天会用到 Livewire 中的 protected $queryString 功能，可以直接拿到网址中的参数，像是这样：

public $date;

protected $queryString = [
    'date',
];

之後透过 $this->date 就能拿到网址中 ?date=2021-09-23 的 2021-09-23 罗！

当然也可以设置预设值，不过预设为空跟没设定预设也没差就是了：

public $date;

protected $queryString = [
    'date' => ['expect' => ''],
];

注意： Livewire 没办法在宣告时就用函式的方式给值像是这样： public $date = Date('Y-m-d'); 因此向我们要拿今天日期就只能在 render() 或是 mount() 中给他预设值：

public function render()
{
    if (!$this->date) $this->date = Date('Y-m-d');
    return view('livewire.todo');
}

之後再计算属性改变我们拿的日期：

public function getTodoProperty()
{
    return TodoModel::whereDate('created_at', $this->date)->get();
}

完成後现在前端画面把日期那栏改成 {{ $date }}就可以透过网址的日期来显示对应的资料啦！！

切换日期的按钮

就剩下两个按钮了，不过在 Livewire 上也十分容易。

只要在按钮上透过魔术方法 $set('property', value) 直接改 $date 的值，我们就直接透过 date('Y-m-d',strtotime('-1 days', strtotime($date))) 去让日期减/加一天：

<div class="mb-10 text-center">
    <button class="ui button" wire:click="$set('date', '{{ date('Y-m-d',strtotime('-1 days', strtotime($date))) }}')">前一天</button>
    <span class="mx-10 text-lg font-bold">{{ $date }}</span>
    <button class="ui button" wire:click="$set('date', '{{ date('Y-m-d',strtotime('+1 days', strtotime($date))) }}')">後一天</button>
</div>

修改资料表中的日期栏位

原本抓日期是用预设的时间戳 created_at ，如果我们要在其他日期建立的话就会失去时间戳的功能，所以这边我们另外开一个date栏位来存待办事项所属的日期。

注：更动资料表的栏位建议使用 migration，使用范例档案请透过指令下 php artisan migrate

所以要改的地方如下：

首先是 $rules 加上 date，这样在 addTodo() 做验证时就会一并将 date 也加进去，就不用再改新增待办事项的 Function 了。

protected $rules = [
    'title' => 'required',
    'date' => 'required',
];

计算属性所选的日期栏位由 created_at 改为 date：

public function getTodoProperty()
{
    return TodoModel::whereDate('date', $this->date)->get();
}

这样就完成啦，也可以在其他日期新增待办事项了！！

DEMO页面欢迎试玩

後记

其实这边的 $queryString 可以额外写一篇文章来讲，但做到这边时才发现有用到这个??。以及最後才临时改掉日期的栏位，导致今天内容跟昨天比起来多了很多，还请见谅 >"<。有遇到任何问题也都欢迎发问～