Skip to content

Instantly share code, notes, and snippets.

@joeytrapp
Last active April 22, 2016 17:19
Show Gist options
  • Save joeytrapp/9046feb70b2230b6f95c3f41ebce064d to your computer and use it in GitHub Desktop.
Save joeytrapp/9046feb70b2230b6f95c3f41ebce064d to your computer and use it in GitHub Desktop.
class App extends React.Component {
constructor() {
super();
this.state = { showPicker: true };
}
componentDidUpdate() {
console.log(document.querySelectorAll(".pika-single"));
}
onDateChange(date) {
this.setState({ date });
}
toggleShowPicker() {
this.setState({ showPicker: !this.state.showPicker });
}
render() {
const { date } = this.state;
return (
<div className="px3">
<h1>React Pikaday Component</h1>
<div>
<button onClick={this.toggleShowPicker.bind(this)}>
Toggle
</button>
</div>
{this.state.showPicker &&
<ReactPikadayComponent
className="field mb2"
placeholder="Select Date"
format="YYYY/MM/DD"
maxDate={new Date('2020-07-26')}
theme="dark-theme"
value={new Date(date)}
onChange={::this.onDateChange}
/>
}
{date ? (
<div>Selected date: {new Date(date).toString()}</div>
) : (
<div>There is no selected date!</div>
)}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment