My97DatePicker，年份加周显示 YYYY-WW

直接上代码

<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'//控件日期格式
}