some minor fixes

mui · Dec 15, 2018 · c771ab4 · c771ab4
1 parent 323c619
commit c771ab4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/docs/src/pages/demos/pickers/MaterialUIPickers.js b/docs/src/pages/demos/pickers/MaterialUIPickers.js
@@ -6,16 +6,12 @@ import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';
 
 const styles = {
-  pickersContainer: {
+  grid: {
     width: '60%',
   },
 };
 
-class MuiPickersDemo extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
+class MaterialUIPickers extends React.Component {
   state = {
     selectedDate: new Date(),
   };
@@ -30,13 +26,27 @@ class MuiPickersDemo extends React.Component {
 
     return (
       <MuiPickersUtilsProvider utils={DateFnsUtils}>
-        <Grid container className={classes.pickersContainer} justify="space-around">
-          <DatePicker label="Date picker" value={selectedDate} onChange={this.handleDateChange} />
-          <TimePicker label="Time picker" value={selectedDate} onChange={this.handleDateChange} />
+        <Grid container className={classes.grid} justify="space-around">
+          <DatePicker
+            margin="normal"
+            label="Date picker"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+          />
+          <TimePicker
+            margin="normal"
+            label="Time picker"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+          />
         </Grid>
       </MuiPickersUtilsProvider>
     );
   }
 }
 
-export default withStyles(styles)(MuiPickersDemo);
+MaterialUIPickers.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MaterialUIPickers);
diff --git a/docs/src/pages/demos/pickers/pickers.md b/docs/src/pages/demos/pickers/pickers.md
@@ -12,39 +12,43 @@ components: TextField
 
 #### Notice
 
-We are currently falling back to **native input controls**.
-If you are interested in implementing or have implemented a rich Material Design Picker with an awesome UX, please, let us know on [#4787](https://github.com/mui-org/material-ui/issues/4787) and [#4796](https://github.com/mui-org/material-ui/issues/4796)! We could add a link to or a demo of your project in the documentation.
-Here are some components that are **promising**:
-- [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers): date pickers and time pickers.
-- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker): time pickers.
-- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers): date pickers and time pickers.
-
+We are falling back to **native input controls**.
+If you are interested in implementing or have implemented a rich Material Design Picker with an awesome UX, please, let us know on [#4787](https://github.com/mui-org/material-ui/issues/4787) and [#4796](https://github.com/mui-org/material-ui/issues/4796)! We could add [a link to or a demo](#complementary-projects) of your project in the documentation.
 
 ⚠️ Native input controls support by browsers [isn't perfect](https://caniuse.com/#feat=input-datetime).
 
 ## Date pickers
 
-A native date picker example with `type="date"`, it can be used as a calendar too:
+A native date picker example with `type="date"`, it can be used as a calendar too.
 
 {{"demo": "pages/demos/pickers/DatePickers.js"}}
 
 ## Date & Time pickers
 
-A native date & time picker example with `type="datetime-local"`:
+A native date & time picker example with `type="datetime-local"`.
 
 {{"demo": "pages/demos/pickers/DateAndTimePickers.js"}}
 
 ## Time pickers
 
-A native time picker example with `type="time"`:
+A native time picker example with `type="time"`.
 
 {{"demo": "pages/demos/pickers/TimePickers.js"}}
 
 ## Complementary projects
-For more advanced use cases you might be able to take advantage of:
+
+For more advanced use cases you might be able to take advantage of.
 
 ### material-ui-pickers
 
+![stars](https://img.shields.io/github/stars/dmtrKovalenko/material-ui-pickers.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/material-ui-pickers.svg)
+
 [material-ui-pickers](https://material-ui-pickers.firebaseapp.com/) provides date and time controls that follow the Material Design spec.
 
 {{"demo": "pages/demos/pickers/MaterialUIPickers.js"}}
+
+### Other
+
+- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker): time pickers.
+- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers): date pickers and time pickers.