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 year selector #442

Closed
wants to merge 173 commits into from
Closed

Datepicker year selector #442

wants to merge 173 commits into from

Conversation

jkruder
Copy link
Contributor

@jkruder jkruder commented Mar 18, 2015

Added capability to select a year by tapping on the year of the date in the date picker (similar in functionality to http://david-mulder.github.io/polymer-docs/bower_components/paper-date-picker/demo.html (page is a bit slow to load). Can also use 'quick year' change buttons in the calendar toolbar; I wanted to provide a user interaction that was similar to changing months. The toolbar year change icons can be hidden but you will need to 'opt-out'. Thoughts on that? The year change toolbar buttons can be easily backed out. Year selection satisfies #191.

Can also provide a date range for valid dates; this satisfies mui/mui-x#7543. Also added capability to disable individual days by providing a function that returns true to disable and false otherwise:

<DatePicker shouldDisableDate={myDateControlFunc} />

The docs date-picker page has been updated with a ranged date picker example.

hai-cea and others added 30 commits February 3, 2015 13:53
CSS-in-JS merge with master
…mponents (checkbox, toggle, radiobuttons) instead of in child (enhancedswitch)
@jkruder
Copy link
Contributor Author

jkruder commented Apr 3, 2015

@mmrtnz I was thinking about using the clone method (React 0.13) for some refactoring of #442 into the css-in-js branch to support pseduo selectors like first-child and last-child.

firstChild(children, style) {
  var [firstChild, otherChildren] = children;
  var newChild
  newChild = React.cloneElement(firstChild, {style: style});
  return otherChildren.unshift(newChild);
}

For selectors like before I envision wrapping each element in a div and inserting the before content. Something like:

before(children, beforeElement) {
  return React.Children.map(children, function(element) {
    <div>
        {beforeElement}
        {element}
    </div>
  });

}

If we want to specify a before for each child element, we can check beforeElement's type and treat it as a one-to-one array with children or if it's a React element use it for all children.

What do you think? I don't want to go too far down this road...I did first/last child wrapping for the toolbar and it looks the same as it does without.

@mmrtnz
Copy link
Contributor

mmrtnz commented Apr 3, 2015

That seems like a much cleaner approach to our current brute-force solution to :first-child and :last-child. If the toolbar looks the same with or without first/child wrapping, I would prefer to do without. I've been striving to use as little pseudo-selectors possible, because managing too many pseudo-selectors only complicates the component in my opinion.

There exist a BeforeAfterWrapper component that does what you've described. It contains some comments detailing its usage. Clearfix is an example for using BeforeAfterWrapper. Maybe you can test to see if it works as well as your current approach?

@jkruder
Copy link
Contributor Author

jkruder commented Apr 3, 2015

@mmrtnz Toolbars display the same without the brute-force prop setting so I've removed it in my branch. I agree with your comment on pseudo selectors; I'll try to remove as much as I can from my date picker changes.

The only difference between what already exists and what I proposed is component vs utility. I wont need a before/after solution for these date picker changes but I may for the time picker that I've been working on.

I should have these changes up soon.

@jkruder jkruder mentioned this pull request Apr 7, 2015
@jkruder
Copy link
Contributor Author

jkruder commented Apr 7, 2015

See #511

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.

None yet

7 participants