[React](https://www.educative.io/answers/what-is-react-js) is a library in JavaScript that is primarily used for developing user interfaces. 

The following are two important definitions that are crucial to understanding the React datepicker:

* **Component:** Everything in React is contained in a component for easier organization.
* **State:** An object associated with every component that defines its characteristics.

![](/api/edpresso/shot/5632119235674112/image/6313707091001344)

The **`DatePicker`** is a React component that is used to select a date from a calendar.

>**Note:** The `DatePicker` requires `proptypes` and at least version 16.0.0 of `react` and `react-dom`. 

<br> 

# Examples

The following code snippet will use the `DatePicker` component to create a customizable date picker which displays the date in MM/DD/YYYY format. More details can be found in the [official documentation](https://reactdatepicker.com/)

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


// Importing the dependencies
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// Creating a class component called App
export default class App extends React.Component {
  // The constructor of the component.
  // It is the first method that is called 
  // up on creation of the component.
  constructor(props){
    super(props)
    // The state object.
    // Initializing the date variable to the 
    // current date.
    this.state = {date: new Date()};
    this.dateChanged = this.dateChanged.bind(this);
  }
  // This is called when the user selects a date
  // using the picker.  
  dateChanged(newdate){
    this.setState({date: newdate});
  }
  // The render() method is responsible for 
  // displaying the changes onto the screen.
  render() {
    // Returning the DatePicker for display.
    return ( 
      <div>
        <h2>Click on the date to open the calendar.</h2>
        <DatePicker selected={this.state.date}
        onChange={this.dateChanged} />
        </div>
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

What is the React datepicker?

React's DatePicker component helps users select dates, requiring proptypes and React 16.0.0+. Customize date format, examples available in the documentation.