Create A Date Range Picker in React JS (By Saifi Code)

 To Create  A Date Range Picker in React JS , need to install following packages : 

npm i antd

npm i moment

Step 1 : import DatePicker from antd and get RangePicker from this package

Step 2 : In the JSX Use the package , you will start get picker ui

Example : 

To get the values use onChange method and save values in state 

Try to console the state to check if the values are updating

App.js File :

import 'antd/dist/antd.css';

import { DatePicker } from 'antd';

import { useState } from 'react';

import moment from 'moment';

const { RangePicker } = DatePicker;

function App() {

  const [dates, setDates] = useState([])

  console.log(dates)

 

  return (

    <div style={{ margin: 20 }}>

      < RangePicker

        onChange={(values) => {

         

          setDates(values.map(item=>{

            return  moment(item).format('YYYY-DD-MM')

          }))

        }}

      />

    </div>

  );

}

export default App;

Just use the above code after installing the required packages.