實作待辦事項的第三天，今天把切換日期的功能做好就完成啦！！今天會透過路由傳遞日期像是這樣 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 可以額外寫一篇文章來講，但做到這邊時才發現有用到這個??。以及最後才臨時改掉日期的欄位，導致今天內容跟昨天比起來多了很多，還請見諒 >"<。有遇到任何問題也都歡迎發問～