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

DatePicker Enhancements #74

Closed
SeanGroff opened this issue Jan 15, 2021 · 4 comments · Fixed by #80
Closed

DatePicker Enhancements #74

SeanGroff opened this issue Jan 15, 2021 · 4 comments · Fixed by #80
Assignees
@SeanGroff
Labels
enhancement New feature or request released

Comments

@SeanGroff
Copy link
Contributor

SeanGroff commented Jan 15, 2021 •
edited
Loading

We need to be able to disable the text input field on the DatePicker component in scenarios where the proper UX is to force the user to select a date from the calendar picker.

  • Add a boolean allowInputFromCalendarOnly that disables text input and makes the entire input open the calendar picker on focus
  • We need to be able to disable certain days within the Calendar Picker by exposing a new prop shouldDisableDate https://next.material-ui-pickers.dev/api/DatePicker

Per Chris Nemeth

The days in the calendar should have consistent styles with the existing Calendars in the SCPlus CRM's

  • Selectable days should have a rounded Teal border
  • Disabled days should maintain current disabled styles
  • Currently selected day should be filled in Teal
  • Current day should have a rounded Orange border
@SeanGroff SeanGroff self-assigned this Jan 15, 2021
@SeanGroff SeanGroff added the enhancement New feature or request label Jan 15, 2021
@SeanGroff
Copy link
Contributor Author

Beginning work on this now to unblock a feature request on the Senior CRM

@SeanGroff
Copy link
Contributor Author

Rather than add complexity to the SQFormDatePicker component I'm composing the functionality needed for this use case and SQFormDatePicker together to make a new component.

Also need to add the ability to clear the date selection since the user loses the ability to do this by not having a text input to interact with.

@SeanGroff
Copy link
Contributor Author

Date/Time pickers are quite simple controls from UX perspective, so most people just use the default appearance. That's why we are not providing any for-component classes API to override stylesheets for any particular component. The only way to override existing stylesheets is with the use of global material-ui theme overrides.

This is from the MUI Pickers docs... 👎

We manage our global MUI theme in the SSC library. I'll have to handle the Calendar Day styling changes there.

SeanGroff pushed a commit that referenced this issue Jan 19, 2021
feat: 🎸 Component to force user date selection via DatePicker
7c27b61 
The SQFormDatePickerWithCalendarInputOnly component disables the text
input forcing the user to make a date selection via the picker. Also
allows the consumer of SQFormDatePicker the ability to disable any(s) in
the calendar view.

✅ Closes: #74
@SeanGroff SeanGroff mentioned this issue Jan 19, 2021
Merged
SeanGroff pushed a commit that referenced this issue Jan 20, 2021
refactor: 💡 Change prop name to setDisabledDate
9512543 
✅ Closes: #74
SeanGroff pushed a commit that referenced this issue Jan 20, 2021
chore: 🤖 Better document the setDisabledDate prop
dfe7059 
✅ Closes: #74
SeanGroff pushed a commit that referenced this issue Jan 20, 2021
chore: 🤖 Update notes for other datepicker component too
0b87a31 
✅ Closes: #74
SeanGroff pushed a commit that referenced this issue Jan 20, 2021
@semantic-release-bot
chore(release): 2.9.0 [skip ci]
9cac13d 
## [2.9.0](v2.8.1...v2.9.0) (2021-01-20)

### Features

* 🎸 Component to force user date selection via DatePicker ([7c27b61](7c27b61)), closes [#74](#74)
@SeanGroff
Copy link
Contributor Author

🎉 This issue has been resolved in version 2.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SeanGroff SeanGroff

Labels
enhancement New feature or request released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: 🎸 Component to force user date selection via DatePicker SelectQuoteLabs/SQForm
1 participant
@SeanGroff