Element ui DatePicker顯示週數

我們公司是做電商的，運營的工作指標都是按周來定的，所以他們對周特別敏感，希望我們能在日期選擇器上顯示週數。剛接到這個需求時，心中很不樂意，因為element-ui的日期選擇器根本不支援顯示週數。我只能看看原始碼來看看能否有解決的辦法

具體**大家可以在github中看到

我們很輕鬆就能找到datepicker相關的**，在packages > date-picker整個目錄都是date-picker的**，在date-picker > src > basic > date-table.vue中就是顯示日期的**，在這裡竟然發現了乙個屬性showweeknumber，在date-table.vue的第83行。

showweeknumber: ,

為了驗證這個引數對我們是否有幫助，我們把showweeknumber預設設定為true試試，然後把第11行的

}

改為

週數

設定用來設定國際化的，國際化檔案中沒有這個對應的翻譯，我們暫時先這麼寫，不然會報錯。當我們完成這個之後神奇的事情發生了

週數展示出來了，而且好像展示的事正確的，7.1-7.6就是2023年的第27周。既然能夠展示週數，那麼為什麼element不開放出來這個引數了，是否是有什麼問題呢。我們自己來簡單的測試下

（1）切換月時，週數並不會發生變化

（2）選中的是29周，輸入框中確展示的是28周

（3）hover選中時，週數不應該展示高亮的樣式

（4）日期區間選中的樣式也不正確

（1）解決週數不變化的問題，我們找到date-table.vue中第149行到152行

if (this
.showweeknumber) ;
}}

當showweeknumber為true時，row[0]就是用來展示週數的，當row[0]，存在時，就不在去獲取新的值，顯然不正確，我們把if判斷去掉就行，這樣就會更新週數

（2）解決選中後周數展示不正確的問題，我們找到date-table.vue中第14行到18行

<
tr 
class
="el-date-table__row"
v-for
="(row, key) in rows"
:class
="":key
="key"
>

isweekactive就是用來獲得當前展示的週數的，當展示週數之後我們要做適當的修改

<
tr 
class
="el-date-table__row"
v-for
="(row, key) in rows"
:class
="":key
="key"
>

至於第三個問題和第三個問題都是樣式的問題，我們修改下date-table對應的樣式即可

我已經向element-ui提了pr，但是還沒有merge，具體的**大家可以在github中看到，解決了國際化的問題和增加了引數展示週數

關於如何應用到專案中：首先把element fork到自己的github中，或者是clone到公司的gitlab中都行。然後把package.json的element的**改為自己的鏈結，最後在webpack配置中，把resolve->symlinks至為false，預設是true，詳情請看鏈結

"dependencies": ,

configurewebpack: ,
},

Element ui DatePicker顯示週數

C C 程式設計學習第12周顯示素數

實現按周顯示日程安排，很垃圾，汗。

周周過，週週結（2）

Element ui DatePicker顯示週數

C C 程式設計學習 第12周 顯示素數

實現按周顯示日程安排，很垃圾，汗。

周周過，週週結（2）

相關推薦

C C 程式設計學習第12周顯示素數