Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(DatePicker): fix programmatic set of date in range mode #4814

Merged
merged 4 commits into from
Jan 10, 2020
Merged

fix(DatePicker): fix programmatic set of date in range mode #4814

merged 4 commits into from
Jan 10, 2020

Conversation

asudoh
Copy link
Contributor

@asudoh asudoh commented Dec 4, 2019

This change adds a logic to re-format dates in <input> when Flatpickr's setDate() API is called. Flatpickr's range plugin has a similar logic to do that, but runs only if the second argument is true.

Fixes #4803.

Changelog

New

  • A new logic in our custom Flatpickr plugin to ensure setDate() API call won't end up with <input> populated with wrong date format.

Testing / Reviewing

Testing should make sure our date picker is not broken.

@asudoh
fix(DatePicker): fix programmatic set of date in range mode
230f5e8 
This change adds a logic to re-format dates in `<input>` when
Flatpickr's `setDate()` API is called. Flatpickr's range plugin has a
similar logic to do that, but runs only if the second argument is
`true`.

Fixes carbon-design-system#4803.
@asudoh asudoh requested a review from a team as a code owner December 4, 2019 11:00
@netlify
Copy link

netlify bot commented Dec 4, 2019 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit 9ad7312

https://deploy-preview-4814--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Dec 4, 2019 •
edited
Loading

Deploy preview for the-carbon-components ready!

Built with commit 9ad7312

https://deploy-preview-4814--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Dec 4, 2019 •
edited
Loading

Deploy preview for carbon-components-react ready!

Built with commit 9ad7312

https://deploy-preview-4814--carbon-components-react.netlify.com

@joshblack
Copy link
Contributor

@asudoh could you share more about this particular fix and why we needed to go down this route? Curious what your thoughts are on when we need to dive into the custom plugin versus what we can do in the component, and vice-versa (just due to my own lack of knowledge!) 🙏

@joshblack
Copy link
Contributor

Would @aledavila or @dakahn want to go through this with @asudoh at some point too? 👀

@aledavila
Copy link
Contributor

@joshblack yea I can join to go through it too

@asudoh
Copy link
Contributor Author

asudoh commented Jan 7, 2020 •
edited
Loading

I choose the plugin approach when the default behavior of Flatpickr does not align with what our design team dictates, or such default behavior is seen as a bug from our perspective. Another case is that such change is seen as it should apply to all framework variants.

emyarod
emyarod approved these changes Jan 9, 2020
View reviewed changes
Copy link
Member

@emyarod emyarod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me, tested against the original codesandbox example and the input field no longer shows both parts of the date range

@asudoh asudoh merged commit 3de43bb into carbon-design-system:master Jan 10, 2020
@asudoh asudoh deleted the range-setdate branch January 10, 2020 00:51
joshblack pushed a commit to joshblack/carbon that referenced this pull request Jan 13, 2020
@asudoh @joshblack
fix(DatePicker): fix programmatic set of date in range mode (carbon-d…
f19b795 
…esign-system#4814)

This change adds a logic to re-format dates in `<input>` when
Flatpickr's `setDate()` API is called. Flatpickr's range plugin has a
similar logic to do that, but runs only if the second argument is
`true`.

Fixes carbon-design-system#4803.
@joshblack joshblack mentioned this pull request Jan 13, 2020
Closed
joshblack pushed a commit to joshblack/carbon that referenced this pull request Jan 14, 2020
@asudoh @joshblack
fix(DatePicker): fix programmatic set of date in range mode (carbon-d…
ba96164 
…esign-system#4814)

This change adds a logic to re-format dates in `<input>` when
Flatpickr's `setDate()` API is called. Flatpickr's range plugin has a
similar logic to do that, but runs only if the second argument is
`true`.

Fixes carbon-design-system#4803.
@joshblack joshblack mentioned this pull request Jan 14, 2020
Closed
@joshblack joshblack mentioned this pull request Jan 31, 2020
Closed
@joshblack joshblack mentioned this pull request Feb 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emyarod emyarod emyarod approved these changes

@abbeyhrt abbeyhrt abbeyhrt approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

React Carbon - Controlled DatePicker type='range', first input shows both values
5 participants
@asudoh @joshblack @aledavila @emyarod @abbeyhrt