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.

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

[DatePicker] Add a default text value #4358

Closed
wants to merge 1 commit into from
Closed

[DatePicker] Add a default text value #4358

wants to merge 1 commit into from

Conversation

nathantalewis
Copy link
Contributor

@nathantalewis nathantalewis commented May 26, 2016

The Default Text Field Value is like the Default Date, except that it can be any string rather than just a date object. It has lower priority than the Default Date, so when both are specified the Default Date will be shown.

The use case that I came across was a need to have both the floatingTextField and a non-date initial value for the TextField as seen in the following screenshot next to a similarly modified TimePicker:
screenshot from 2016-05-26 14-03-49
In this screenshot, "Today" is the text passed as the defaultTextFieldValue. It could also have been something like "Pick a date" or "None". The styling in the screenshot for the date component is just because it is set to disabled and unrelated to this PR.

The implementation approach for this PR is to just pass this field as the value of the TextField when nothing else is specified.

I can think of two alternate approaches that could achieve the same thing:

  1. Without making any changes to the existing components, you could start with a regular TextField with an onTouchTap function that sets some state to indicate that a DatePicker should be rendered instead of the TextField. This would produce more verbose code since an entire additional TextField component and the conditional logic for when to display it would be needed.
  2. Allow the defaultDate property to accept strings as well as dates. When it is a string, don't try to parse it as a date when the DatePicker is first opened. This approach could confuse developers who think they could put a string representation of a date in this field and have its value respected when they open the date picker.
  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

If the current approach sounds better than the two alternative approaches, I'll go ahead and write the related tests and update the docs with an example.

@mbrookes
Copy link
Member

hintText seems to be the solution here.

@nathantalewis
Copy link
Contributor Author

@mbrookes, confirmed that hintText is indeed a better solution. Thanks!

For anyone looking at this in the future, the following works out of the box with v0.15.0 to achieve the same result as the screenshot in the description:

<DatePicker
    disabled={true}
    floatingLabelFixed={true}
    floatingLabelText="Checkout Date"
    hintText="Today"
/>

Closing this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: date picker This is the name of the generic UI component, not the React module! component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants