Java Hit: React JS - DatePicker

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:

2 comments:

UnknownSeptember 25, 2017 at 6:00 AM
Thanks for sharing this post. Really useful for me to learn Reactjs. Its very useful for me. ReactJS training in Bangalore
ReplyDelete
Replies
nbitsApril 25, 2018 at 10:54 PM
It is very useful information about React js. This is the place for learner and glad to be here in this blog Thank you
React js Training in Hyderabad
Enroll
ReplyDelete
Replies

Add comment