直接上代碼
<input id="endDate" readOnly="ture" type="text" placeholder="請選擇結束時間" id="GtimeField_end" class="Wdate TimeFiled conMargin"
style="height:28px;width: 200px; background-color: white; border-radius: 5px !important;"
onclick="WdatePicker({vel:'endDate',opposite:'true',disabledDays:[1,2,3,4,6],el:'endDateReal',firstDayOfWeek:5,isShowWeek:true,realDateFmt:'yyyy 第W周',dateFmt : 'yyyy-MM-dd '})" />
<input id="endDateReal" style="display:none">
控件的樣式是用的bootstrap風格的，這個可以不用管。
今天收到需求要選擇時間控件年份加周，並要求周的起始日爲本週星期五，結束日爲下週星期四，顯示格式爲：2019第12周
本身想用boostrap風格的 datepicker，後來看了官網api沒找到該控件是否支持顯示 W 周的，
最後還是用了My97DatePicker
查了api 最後用到的關鍵配置
| el | Element 或 String | null | 指定一個控件或控件的ID,必須具有value或innerHTML屬性(如input,textarea,span,div,p等標籤都可以),用戶存儲日期顯示值(也就是dateFmt格式化後的值) |
| vel | Element 或 String | null | 指定一個控件或控件的ID,必須具有value屬性(如input),用於存儲真實值(也就是realDateFmt和realTimeFmt格式化後的值) |
| dateFmt | string | 'yyyy-MM-dd' | 日期顯示格式 你可以參考自定義格式 |
| realDateFmt | string | 'yyyy-MM-dd' | 計算機可識別的,真正的日期格式 |
| firstDayOfWeek | int | 0 | 周的第一天 0表示星期日 1表示星期一 |
| isShowWeek | bool | false | 是否顯示周 |
| disabledDays | Array | null | 可以使用此功能禁用週日至週六所對應的日期 0至6 分別代表 週日至週六 |
最後生成的wdate
//由於My97DatePicker 的時間選擇界面是根據配置dateFmt 來顯示，
//如果只配置yyyy則界面上只會顯示年份,所以考慮將控件的值綁定到一個隱藏的input裏，
//這裏必須將el綁定到隱藏控件裏，不讓My97DatePicker會默認將el值初始化成當前控件
{
vel:'endDate',//綁定控件 用於現在真實的值也就是最終我先要的值（2019第19周），對應realDateFmt
el:'endDateReal',//綁定控件，用於顯示控件的值，該控件隱藏
firstDayOfWeek:5,//起始日，（0對應週日，1對應週一以此類推,配置後則把週五定爲週日 5-》0,）
disabledDays:[1,2,3,4,5,6],//（該值就是以周爲基礎，即一週的七天，不和firstDayOfWeek影響。）
//這裏有點難描述，就是firstDayOfWeek和disabledDays是獨立的，當firstDayOfWeek配置成5，
//disabledDays如果要只能選一週的第一天，不需要配成[0,1,2,3,4,6],只要配置[1,2,3,4,5,6]就行
isShowWeek:true,//是否顯示周，在時間界面左側顯示週數
realDateFmt:'yyyy 第W周',//真實日期格式
dateFmt : 'yyyy-MM-dd'//控件日期格式
}