Created
March 10, 2018 01:16
-
-
Save okonomi/fcce275fd445610f4f6277442057de2b to your computer and use it in GitHub Desktop.
react-datepickerでCustomInputを指定するサンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import moment from 'moment' | |
import logo from './logo.svg'; | |
import './App.css'; | |
import DatePickerWrapper from './DatePickerWrapper'; | |
class App extends Component { | |
state = { | |
selectedDate: moment() | |
} | |
handleChange = (date) => { | |
this.setState({ selectedDate: date }) | |
} | |
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.js</code> and save to reload. | |
</p> | |
<DatePickerWrapper | |
selectedDate={this.state.selectedDate} | |
onChange={this.handleChange} | |
/> | |
</div> | |
); | |
} | |
} | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import DatePicker from 'react-datepicker' | |
import 'react-datepicker/dist/react-datepicker.css' | |
import 'font-awesome/css/font-awesome.css' | |
class CustomInput extends React.Component { | |
render() { | |
return ( | |
<button | |
onClick={this.props.onClick} | |
> | |
{this.props.value} <span className="fa fa-calendar" /> | |
</button> | |
) | |
} | |
} | |
const DatePickerWrapper = (props) => { | |
return ( | |
<DatePicker | |
selected={props.selectedDate} | |
customInput={<CustomInput />} | |
onChange={props.onChange} | |
/> | |
) | |
} | |
export default DatePickerWrapper |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment