element-ui的el-date-picker设置月份和年份日期格式及格式校验问题

时间:2024-02-24 22:40:30

项目需求,在设置日期的时候选择年份和月份,对应的可以设置出只选择某一年或者某一月。这是完成后要求的

在这里插入图片描述
在这里插入图片描述

这样实现不是难事,主要是需要保存下来的数据也是如2018-01和2018这样的,而不是。2018-01-01这样的所有。代码如下
在这里插入图片描述
这里主要是这几个属性起作用 format ,type ,value-format , @change

type设置为date,则就是普通的2018-01-01日期,设置为month,那就是月,2018-01;设置为year,那就是年,2018;
format是展示数据格式,就是你选择了之后展示的样子。
value-format则是保存下来的数据格式(最开始不知道这个,无论怎么弄,月份保存下来的总是2018-01-01)!!!!
然后是@change里面的function可以获取到当前设置的数据
在这里插入图片描述
这里的value就是你选的年月日期值,可以进行相关的业务逻辑的操作从而保存下来!

最后还有一个校验的问题,当一切设置好后,代码却报错。无法保存,找了一圈发现是规则校验错了。

Error in event handler for "click": "TypeError: t.getTime is not a function"

这样的错误,最后发现了问题所在
在这里插入图片描述
最初了时候校验规则里的type:‘date’;这在你日期是默认的date的情况下面没有错误。当你的日期格式出现了年月后,这个校验规则就无法通过了。通过将date改成String就可以了。

大概就这样,最后@change需要去value-format配合使用才起作用,否则走不到change内的方法。