Java Hit: August 2016

Saturday, August 6, 2016

React JS - DatePicker

Date Picker

You should install and import the below for date picker.

npm install react-datepicker --save

App.jsx

import React from 'react';
  import DatePicker from 'react-datepicker';
  import moment from 'moment';

  class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        startDate : moment()
      };

      this.handleChange = this.handleChange.bind(this);
      
    }

    handleChange (date) {
      this.setState({
        startDate : date
      });
    }

     render() {
        return (
           <div>
              Hello World!!!
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />

  <br />
          <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange} />;
           </div>
        );
     }
  }

  export default App;

index.html
datepicker css added here.

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

<link rel="stylesheet" type="text/css" href="node_modules/react-datepicker/dist/react-datepicker.css"/>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

main.js

Rendered the App from here,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';


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

Output: