Skip to content

Instantly share code, notes, and snippets.

@ideoclickVanessa
Created October 12, 2018 21:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ideoclickVanessa/4820f8f8eb8baf581ac5ba1e821852a9 to your computer and use it in GitHub Desktop.
Save ideoclickVanessa/4820f8f8eb8baf581ac5ba1e821852a9 to your computer and use it in GitHub Desktop.
Repros https://github.com/chingyawhao/material-ui-next-pickers/issues/20 using @material-ui/core 3.2.0 and material-ui-next-pickers 0.0.15 Simply use `npx create-react-app my-app --scripts-version=react-scripts-ts` and use the attached versions of the files.
import * as React from 'react';
import { MyComponent } from "src/MyComponent";
import logo from './logo.svg';
class App extends React.Component {
public render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
<MyComponent />
</div>
);
}
}
export default App;
import { CssBaseline } from "@material-ui/core";
import deepPurple from "@material-ui/core/colors/deepPurple";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
const theme = createMuiTheme({
palette: {
primary: deepPurple,
},
});
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
import { DateFormatInput } from "material-ui-next-pickers";
import * as React from "react";
interface IMyComponentState {
date: Date;
}
export class MyComponent extends React.Component<any, IMyComponentState> {
constructor(props: any) {
super(props);
this.state = {
"date": new Date(),
};
}
public render(): JSX.Element {
return (
<DateFormatInput name='date-input' value={this.state.date} onChange={this.onChangeDate} />
);
}
private onChangeDate = (newDate: Date): void => {
this.setState({ "date": newDate });
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment