Чтобы реализовать средство выбора даты с выбором диапазона в приложении React.js с помощью npm, вы можете использовать различные доступные библиотеки. Вот несколько методов и библиотек, которые вы можете рассмотреть:

1. React Datepicker: React Datepicker — это популярный пакет npm, который позволяет реализовать средство выбора даты в вашем приложении React.js. Он поддерживает выбор диапазона, устанавливая в свойстве selectedмассив дат.

Пример использования:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
const DateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const handleDateChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={handleDateChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      inline
    />
  );
};
export default DateRangePicker;

2. React Date Range Picker: React Date Range Picker — еще один популярный пакет npm, который предоставляет компонент выбора диапазона для React.js. Он предлагает различные варианты настройки и поддерживает выбор диапазона.

Пример использования:

import React, { useState } from 'react';
import { DateRangePicker } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
const DateRangePicker = () => {
  const [dateRange, setDateRange] = useState([
    {
      startDate: null,
      endDate: null,
      key: 'selection',
    },
  ]);
  const handleSelect = (ranges) => {
    setDateRange([ranges.selection]);
  };
  return (
    <DateRangePicker
      ranges={dateRange}
      onChange={handleSelect}
    />
  );
};
export default DateRangePicker;

3. Material-UI Datepicker: если вы используете библиотеку Material-UI в своем приложении React.js, вы можете использовать компонент DatePicker, предоставляемый Material-UI. Он поддерживает выбор диапазона путем установки свойства dateRange.

Пример использования:

import React, { useState } from 'react';
import { DatePicker } from '@mui/lab';
const DateRangePicker = () => {
  const [dateRange, setDateRange] = useState([null, null]);
  const handleDateChange = (newValue) => {
    setDateRange(newValue);
  };
  return (
    <DatePicker
      label="Date Range"
      value={dateRange}
      onChange={handleDateChange}
      renderInput={(params) => <TextField {...params} />}
    />
  );
};
export default DateRangePicker;

Это всего лишь несколько примеров, и для React.js доступно множество других библиотек выбора даты, которые поддерживают выбор диапазона. Выберите тот, который лучше всего соответствует требованиям вашего проекта.