記一次解題思路(周起始日)

2019年1月12日 上午11:30

date-picker, picker-options, firstDayofWeek

原由

昨天下班前開了一個小會，會議中提到了一個問題：
element-ui日期組件默認是從週日開始的（以下圖），目的是但願能從週一開始。

一個成熟的組件，這個基本功能怎麼可能沒有？！（若是沒有，組件是否方便擴展實現）
但他們說查閱了文檔，沒發現該功能。

探索

查文檔

本着懷疑的態度，會議結束後，我去翻了一下文檔。

發現文檔裏是有這個配置的：

文檔中寫了可選值1到7，默認值7，這不正是咱們要的嗎？只要把這個配置設置爲1不就好了嗎 ？
（這個時候我並無注意到這個配置的標題是Picker Options）

文檔上明明寫的有，爲何他們說不行呢？那就讓我來驗證一下吧！

驗證

因而我本地起了個服務，直接給ElDatePicker 組件傳入了一個firstDayofWeek:1,

<el-date-picker 
  ...(省略)
  :firstDayOfWeek="1"
  placeholder="選擇日期">
</el-date-picker>

咦 ？確實沒生效，日期仍是從7開始的。
我值傳錯了？回看一下文檔類型是Number,沒錯啊。
組件接收到我傳的值了嗎？

排疑

經過Vue Devtools查看了一下

奇怪，是7也就算了，怎麼仍是掛在data下面的，爲何不是props?

再驗證

我點擊旁邊的-號修改了這個值，發現日期組件隨着這個值在變化！（只要把值調爲1，就是咱們但願的結果）

得出結論

這說明了什麼？？

說明這確實是可配置的！！

那麼問題就很明顯了：

• 要麼是我配置錯了
• 要麼是組件有bug

再探索

提出疑問

因而我又回頭看了一下文檔

• Picker Options 上方的表格是 Attributes ？
• 放在Attributes裏纔是直接經過props傳遞啊？
• firstDayOfWeek爲何不放在Attributes裏？（因爲沒用過這個組件，並沒仔細去看Attributes裏的每個值，此時尚未發現Attributes表格裏面有picker-options,若是能認真一點的話，事情到這裏就該結束🔚）

跟隨疑問

帶着一肚子疑問去看了下組件源碼

當我看到firstDayOfWeek在data裏定義，並且當前文件沒有對它賦值的時候，竟然就天真的認爲這是一個bug,爲何把一個要配置的值放在data裏寫死了7？放在data裏我怎麼傳值？（這個地方的我太草率了！! 這個時候正確的作法應該是：耐心的接着看一下，好比mixins，若是這裏仔細點，問題到這裏也能解決了）

<date-table
   …(省略部分屬性)
  :first-day-of-week="firstDayOfWeek"
>
</date-table>

data() {
  return {
   …(省略)
    firstDayOfWeek: 7
  };
}

我愚蠢的把這個當成是一個bug,因而打開了github,去issues裏搜索了一下看有沒有提過這個bug,一搜，還真有。

[Bug Report] datepicker week type doesn't consider firstWeekOfDay

下面有一條維護者的回覆："
firstDayOfWeek should be nested in picker-options"

找到正確使用方法

⚡️⚡️⚡️⚡️⚡️（我真蠢，真的）
此時才明白上面那個疑問（爲何firstDayOfWeek不放在Attributes）

因而這個時候，我纔去Attributes下面看了一下，看見picker-options安安靜靜地躺在裏面。改成下面這樣，就好了。

:picker-options="{
  firstDayOfWeek: 1
}"

探索答疑

事情到了這裏，已經結束了嗎？不！上面還有一個疑問沒解決呢（爲何pickerDayofWeek在data裏，那它是怎麼改變的？）

我此次由外到內，仔細的看了一下組件源碼，這纔看清楚了

const updateOptions = () => {
   …(省略)
  for (const option in options) {
    if (options.hasOwnProperty(option) &&
        // 忽略 time-picker 的該配置項
        option !== 'selectableRange') {
      this.picker[option] = options[option]; // 賦值在這裏！
    }
  }
}
this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });

組件的細節這裏就不贅述了，有興趣能夠本身去看。

最後：

這更像是一篇流水帳式的敘事文，問題是個小問題，但願你們能從解決問題的思路上有點啓發。

雞湯式反思：

• 探索 既然已經給出了firstDayOfWeek，那就說明功能是有的，沒生效不能武斷認爲它沒提供。
• 認真 曾經有兩次差點接近真相，但都錯過了。

這不是一次成功的解題，是走了彎路最後解決的問題。

共勉。