解决日期组件周模式无法设置valueFormat的问题
Demo预览：
https://sunzsh.github.io/vue-demos/#/eldatepicker-ww
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/components/el-date-picker-ww.js
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/eldatepicker-ww.vue
大家看这个date picker有这么多模式
比如说选择周啊
选择多个日期多个年都可以
然后呢
前两天有小伙伴发现他这个选择
周的模式有点bug
没法设置value-format
什么意思呢
我们来看这个demo
我这个现在没有设置value-format
我选择一个周
（我只设置了一个format）
（就是设置里边展示的这个格式）
所以它绑定的这个值啊
是一个date（日期）类型
然后呢我现在给它加上value-format
刷新一下
然后 选择一个
大家看 现在的下边的value是对了
我再切换一下都没问题
但是呢控制台报错
然后组件没有回显
那其实啊
官方的文档里也说（简单提到）了这个问题了
大家看我用的是"WW"这个值
他说这个仅适用于周选择器 （口误，少说了：的format)
言外之意就是value-format不能用
包括这一个w的都不能用
那我们就来尝试看看能不能写个补丁
把它补上
我们先来看看报错这样代码哈
我们在这打个断点刷新
然后呢我们选一个
大家看它这个data现在是一个字符串
字符串当然就没有这个getFullYear()这个方法
所以啊也就印证了饿了么u i
没有对周模式进行兼容
他始终认为这是一个date类型
然后啊就在原码里翻到了对应的
这样代码就在这里
因为他经过编译所以长得不太一样
这次翻原码的过程特别长
因为篇幅原因我就不展示了啊
之前也分享过类似的
那主要的代码就是这一行
就是this.value这个变量
他现在就是字符串类型的了
那我们再往上翻
就会翻到这个方法parsedValue
这是一个计算属性
它的返回值最终会传递给这个value
所以呢我们要想办法解决
这个方法现在不支持week模式
然后啊我就自己写了一个组件
先去继承datepicker
然后重写里边的parsedValue这个方法
那
到这呢还有小插曲
我也是新学到的啊
现学现卖给大家我先把这个代码放行
什么意思呢
就是我们已经通过value-format
把它格式成一个字符串了
那我们如果想把它回退成date类型
我们需要确切的知道
它是第50周的周几
这样才能有一个确切的日期
但是呢现在没有怎么办呢
那我就需要随便定一个规则
每次选择第多少周的周几
然后再写后边代码的时候我就发现
其实这每年的第一周是有学问的
不是1月1号所在的就是第一周哈
我们比如说我举个例子
比如说这2021年1月1号他就不是
21年的第一周
他是20年的最后一周
那怎么来界定呢
我们来看这个8601的国标啊
在这里他是说啊
本年度的第一个星期四所在的
这个星期
是第一个日历星期
所以我们来看21年的这个
他并不是第一个星期四所在的日期
所以呢第一周应该是从3号开始
（他从周日开始算啊）
从3号开始这个算第一周
我们来验证一下啊
我们在这用官方的这个demo
我们选21年的1月1号
大家看 你一选
他就跑到了2020年的第53周了
回到代码里
如果大家读代码会发现我选择了
第1个星期四 (详细的逻辑感兴趣的小伙伴自行看代码吧，很简单）
然后去往后推
然后呢写好这个组件之后
我们在main里边把我们写的导进来
然后呢
还用他这个名字去覆盖一下他
原来这个组件
我们保存一下
好我们再试一下
打开
这样就没问题了
控制台也没有报错了
然后这个代码呢还是在这个demo里
demo在这个Github上
最后更新于