Ant Design 通過 WeekPicker 獲取一周的起止時間

項目中遇到了選擇日期獲取當前日期一周的周一和周日的日期，如下：

 

項目使用的是 ant design，所以第一時間想到了 DatePicker 中的 WeekPicker 組件，查詢文檔得到 WeekPicker 組件中的屬性和方法如下：

引入組件，編寫相關代碼如下：

<WeekPicker
    value={weekData}
    onChange={this.handleWeekChange}
    style={{ width: 260 }}
    placeholder='請選擇日期'
/>

handleWeekChange = (weekData, weekStrings) => {
    console.log(weekData, weekStrings);
}

選擇日期，打印 onChange 方法獲取到回調值：

通過打印信息可以看出，返回的 weekData 是一個 moment 對象，weekString 是當前對象解析出來的時間值，

默認顯示了選中的年份和第幾周，這並不是我想要的，如果需要獲取到當前周詳細的時間信息，則需要對返回的結果進行處理，代碼如下：

handleWeekChange = weekData => {
　　const startDate = moment(weekData).day(1).format('YYYY/MM/DD (dddd)'); // 周一日期
　　const endDate = moment(weekData).day(7).format('YYYY/MM/DD (dddd)'); // 周日日期
　　console.log(startDate, endDate);
}

重新選擇時間（比如2018年11月6日）：

查看打印信息，如下：

可以看到，已經正確獲取到了當前日期所在周的起止日期了。

這里的日期解析主要用到了 moment.js 提供的兩個方法，

moment(date).day(1) 代表指定日期所在周的星期一的日期，

moment(date).day(7) 代表指定日期所在周的星期日的日期，

並且通過 format 方法格式化成指定的格式。更多 moment 的使用方法，參考 moment.js 文檔