[docs] Add Pickers TypeScript demos (#15103)

Author: sperry94

docs/src/pages/demos/pickers/DateAndTimePickers.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      flexWrap: 'wrap',
+    },
+    textField: {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      width: 200,
+    },
+  });
+
+export type Props = WithStyles<typeof styles>;
+
+function DateAndTimePickers(props: Props) {
+  const { classes } = props;
+
+  return (
+    <form className={classes.container} noValidate>
+      <TextField
+        id="datetime-local"
+        label="Next appointment"
+        type="datetime-local"
+        defaultValue="2017-05-24T10:30"
+        className={classes.textField}
+        InputLabelProps={{
+          shrink: true,
+        }}
+      />
+    </form>
+  );
+}
+
+DateAndTimePickers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(DateAndTimePickers);

docs/src/pages/demos/pickers/DatePickers.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      flexWrap: 'wrap',
+    },
+    textField: {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      width: 200,
+    },
+  });
+
+export type Props = WithStyles<typeof styles>;
+
+function DatePickers(props: Props) {
+  const { classes } = props;
+
+  return (
+    <form className={classes.container} noValidate>
+      <TextField
+        id="date"
+        label="Birthday"
+        type="date"
+        defaultValue="2017-05-24"
+        className={classes.textField}
+        InputLabelProps={{
+          shrink: true,
+        }}
+      />
+    </form>
+  );
+}
+
+DatePickers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(DatePickers);

docs/src/pages/demos/pickers/MaterialUIPickers.tsx

@@ -0,0 +1,60 @@
+import 'date-fns';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import DateFnsUtils from '@date-io/date-fns';
+import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pickers';
+
+const styles = createStyles({
+  grid: {
+    width: '60%',
+  },
+});
+
+export type Props = WithStyles<typeof styles>;
+
+export interface State {
+  selectedDate: any;
+}
+
+class MaterialUIPickers extends React.Component<Props, State> {
+  state = {
+    // The first commit of Material-UI
+    selectedDate: new Date('2014-08-18T21:11:54'),
+  };
+
+  handleDateChange = (date: any) => {
+    this.setState({ selectedDate: date });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { selectedDate } = this.state;
+
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <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>
+    );
+  }
+}
+
+(MaterialUIPickers as React.ComponentClass<Props, State>).propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(MaterialUIPickers);

docs/src/pages/demos/pickers/TimePickers.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      flexWrap: 'wrap',
+    },
+    textField: {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      width: 200,
+    },
+  });
+
+export type Props = WithStyles<typeof styles>;
+
+function TimePickers(props: Props) {
+  const { classes } = props;
+
+  return (
+    <form className={classes.container} noValidate>
+      <TextField
+        id="time"
+        label="Alarm clock"
+        type="time"
+        defaultValue="07:30"
+        className={classes.textField}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputProps={{
+          step: 300, // 5 min
+        }}
+      />
+    </form>
+  );
+}
+
+TimePickers.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(TimePickers);