add multi format support to DateInput

[onlyann]

Extend the format prop of the DateInput to allow an array of formats.
The component then uses the array of formats when attempting to parse a date from the input.
The first value of the array determines the displayed format.

A typical use case is to allow the user to enter in several supported formats, such as D/M/YY or DD/MM/YYYY

[ant-design-bot]

Deploy preview for rc-calendar failed.

Built with commit 3ff0bf6

https://app.netlify.com/sites/rc-calendar/deploys/5bff611640e2a4716e67e188

[codecov-io]

Codecov Report

Merging #437 into master will increase coverage by 0.3%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master     #437     +/-   ##
=========================================
+ Coverage   88.31%   88.62%   +0.3%     
=========================================
  Files          10       10             
  Lines         702      712     +10     
  Branches      192      193      +1     
=========================================
+ Hits          620      631     +11     
+ Misses         69       68      -1     
  Partials       13       13

Impacted Files	Coverage Δ
src/util/index.js	100% <100%> (ø)	⬆️
src/date/DateInput.js	84.84% <100%> (+2.59%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c92cf57...3ff0bf6. Read the comment docs.

[zombieJ]

This pull request introduces 2 alerts when merging 117550f into c92cf57 - view on LGTM.com

new alerts:

• 1 for Potentially inconsistent state update
• 1 for Unused or undefined state property

---

Comment posted by LGTM.com

[zombieJ]

This pull request introduces 1 alert when merging 907c18e into c92cf57 - view on LGTM.com

new alerts:

• 1 for Potentially inconsistent state update

---

Comment posted by LGTM.com

[zombieJ]

This pull request introduces 1 alert when merging 6cdfa36 into c92cf57 - view on LGTM.com

new alerts:

• 1 for Potentially inconsistent state update

---

Comment posted by LGTM.com

[onlyann]

Part of ant-design/ant-design/issues/13148

[mischa-s]

Yay thank you for this 😃 , was just about to try and hack around it 🛠 are there any blocks to this being merged?

[mischa-s]

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

[onlyann]

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

@zombieJ is a bot

[mischa-s]

@zombieJ it looks like you have been doing a lot of the releases for this repo, thanks for the great work!!! Is there anything I can do to help get this and #438 merged?

@zombieJ is a bot

Cool! I've never seen a bot that has starred 41 repos has 62 personal repos and has a github.io blog... @onlyann thanks for making the two PRs mentioned, do you have write access or do you know who does?

[onlyann]

I don't know the maintainers. We can only hope that one of them will find the time to review and accept the PR

[zombieJ]

Aha, I'm not robot but LGTM add auto comment. Currently lack of time, sorry for delay~

[zombieJ]

Pls add the package-lock.json in ignore file.

[onlyann]

I didn't know there was a real account on top of the automated comments 😅

Made the recommended changes.
Thanks for your time @zombieJ

[zombieJ]

This makes str & invalid un-control. It's better to compare selectedValue & format changed to setState instead of focus status.

[onlyann]

I am not sure I understand what you suggest.

This is done to prevent re-formatting the input while a user is editing the date, i.e. to prevent reformatting 1/12/18 to 01/12/2018 until focus is lost.

I could change the condition to be:

const hasMultipleFormats = !!nextProps.format && nextProps.format.length > 1;

if (!hasMultipleFormats || !this.state.hasFocus) {
   this.setState({
      str: formatDate(selectedValue, nextProps.format),
      invalid: false,
   });
}

Would that work for you or am I missing something else?

[zombieJ]

I mean when props of selectedValue or format changed. Current code will not makes state update. I suggest to modify like this:

if (
  !shallowEqual(this.props.format, format) ||
  (!this.props.selectedValue && selectedValue) ||
  !this.props.selectedValue.isSame(selectedValue, 'date')
) {
  // ...
}

[onlyann]

This won't work because on every key stroke, if the input parses to a valid date, the Calendar component will change the selectedValue prop, effectively triggering componentWillReceiveProps on DateInput and that will override the date input to a different format while the user is typing.

[zombieJ]

tested. You're correct.