Datepicker Forecast On A Day

datepicker-forecast-on-a-day.markdown

Datepicker Forecast On A Day

A Pen by colleenDunlap on CodePen.

License.

index.html

<div id="app"></app>

script.babel

class Application extends React.Component {
      
  constructor(props){
    super(props)
    this.state = {date: moment()};
    this.dateChanged = this.dateChanged.bind(this);
  }
      
  dateChanged(d){
    this.setState({date: d});
  }

  render() {
    return (
    <div>
        <DatePicker selected={this.state.date}
                    onChange={this.dateChanged} inline />
      </div>
    );
    
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/react-onclickoutside@5.7.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.js"></script>

style.css

html, body
  height: 100%
  
body
  background: #333
  display: flex
  justify-content: center
  align-items: center
  font-family: Helvetica Neue
  
h1
  font-size: 2em
  color: #eee
  display: inline-block

a
  color: white
p
  margin-top: 1em
  text-align: center
  color: #aaa

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.min.css" rel="stylesheet" />