My97DatePicker,年份加周显示 YYYY-WW

直接上代码


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

 

你可能感兴趣的:(javascript,My97DatePicker)