Element: [Bug Report] Date validation with value-format 'yyyy-MM-dd'

[luke-oakes]

Element UI version

2.1.0

OS/Browsers version

Chrome v64 (Windows)

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/u2a60boq/

Steps to reproduce

See repro

Combining form validation for date from http://element.eleme.io/#/en-US/component/form#validation
with value-format attribute from http://element.eleme.io/#/en-US/component/date-picker#formatted-value

I used value-format="yyyy-MM-dd".

What is Expected?

Validation :)

I realise value-format is alpha ... but wanted to make sure you are aware of this incompatibilty.

What is actually happening?

Won't validate the date field....

Error in console:
vue.js:584 [Vue warn]: Error in event handler for "click": "TypeError: t.getTime is not a function"

[luke-oakes]

(p.s. A separate issue, but thought I'd let you know the anchor links in your documentation are broken ... I had to manually fix the ones I included above - sorry this is unrelated to the original issue)

[wacky6]

In your case, write custom validator for strings.

Obviously, after value-format the component's value is a string, not a Date. So type=date won't work

[wacky6]

Well. the anchor links are not broken on my machine. formatted-value changed to http://element.eleme.io/#/en-US/component/date-picker#date-formats

[luke-oakes]

OK thanks. I'll see what I can do.

I would have thought that if you're going to make it easy to return dates as strings, then you would also make it easy to validate dates as strings. Seems like this would best happen in async-validator. Maybe you guys should collaborate on this one! :)

(p.s. thanks for fixing the anchors!)

[luke-oakes]

Although, looking at it further, it seems the value doesn't get updated unless the date is valid, so the date should always be valid or empty, right? So I guess I would only need to create custom validation if I wanted to check the date was in a certain range or something.

Anyway, hope this non-issue helps someone else with the same problem :)
Thanks

[wacky6]

Actually, async-validator is a third-party library, which just happened to be chosen when element was first developed.

I agree that there are "inconveniences" (quite some people make mistakes, there must be better ways), but we fear more about causing severe breaking changes across major versions. So it remained as element's validation library.

As for "type=xxx", people have different opinions on it. Some believe that a string with date-like format to be a "date", while others think only Date objects can be called "date". Based on my experience, authors of async-validator take the second idea. I personally agreed with their choice.

For your curiosity, the reasons behind value-format when I designed it were:

1. Many people mistakes Date objects (which prints out UTC time) for date strings. ("2018-02-13T16:00:00.000Z" vs 2018-02-14, 16:00:00 is caused by timezone offset).

2. We get issues complaining about 1, and I (probably other maintainers) get tired of replying them.

3. Sometimes, I want to be lazy. I don't want to convert Date objects to date strings (defined by backend's API interface) before sending an request.

4. As a conclusion, it's probably better to give user capability to alter the "type" of component's value, hence "value-format". It now even supports timestamp to save more LOCs.

---

As for validation, you can simply check if the value is truthy. By design, date-picker will not emit invalid dates. You can use required check if your use case is simple enough. You can also use pickerOptions' disabledDate to limit the range of available dates.

If you need to perform more complicated validation, you will need to parse and check the value. Element uses a modified fecha library internally, I suggest you check against the date format string specification to avoid mistakes.

[luke-oakes]

Thanks for your thorough and detailed response - it's very helpful. Hopefully not only to me.

I'm relatively new to Vue and Element I've just been trying to get my head around everything, and I now understand that validating it as a string is fine as the datepicker will only emit valid dates anyway. This means that invalid input will appear as blank to the validator and I just need to make sure my error message makes sense whether the use leaves it blank or writes something invalid in.

Thanks again, and great job with Element - it's making development so much easier and fun!

[huanghui8030]

formatted-value="yyyy-MM-dd" 这样写还是报错呢？

错误如下：

vue.js:597 [Vue warn]: Error in event handler for "el.form.change": "TypeError: t.getTime is not a function"

已知道解决方法

解决方法：由于在rules中验证这个时间控件时加了type=“data”，将验证中的type=“data”去掉即可！