@types/react-datepicker

Basic Date Selection

This feature allows users to select a single date. The DatePicker component is imported from react-datepicker, and its selected and onChange props are used to manage the selected date state.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
}

Date Range Selection

This feature enables users to select a range of dates. The DatePicker component's selectsRange prop is set to true, and the startDate and endDate props are used to manage the range of selected dates.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(dates) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
      }}
      startDate={startDate}
      endDate={endDate}
      selectsRange
    />
  );
}

Custom Date Format

This feature allows the display format of the selected date to be customized using the dateFormat prop.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat='yyyy/MM/dd'
    />
  );
}