The Multiple Range mode is a way for selecting multiple date ranges and the codes provided below show how to do it using the useState hook to manage the selected date ranges.

The initially selected date ranges are passed to the Calendar component using the value prop, while the onChange function is used to update the selected date ranges whenever the user selects a new range.

In this example, the values state variable is initialized with three selected date ranges. Each range is represented as an array of two DateObject instances that specify the start and end dates of the range. The Calendar component is used to display the calendar and handle user input. The value prop is set to the values state variable, which specifies the initially selected date ranges. The onChange prop is set to the setValues function, which is used to update the values state variable whenever the user selects a new date range. The multiple props are set to true, which allows the user to select multiple dates. The range prop is also set to true, which enables the user to select a range of dates within a single selection. In summary, the Multiple Range mode is useful for selecting multiple date ranges in a calendar or date picker.

const [values, setValues] = useState([
  [new DateObject().set({ day: 1 }), new DateObject().set({ day: 3 })],
  [new DateObject().set({ day: 6 }), new DateObject().set({ day: 12 })],
  [new DateObject().set({ day: 23 }), new DateObject().set({ day: 27 })],
])
.
.
.
<Calendar
  value={values}
  onChange={setValues}
  multiple
  range
/>

the default value of multipleRangeSeparator prop is ','

<DatePicker
  multiple
  range
  dateSeparator=" to "
  multipleRangeSeparator="&"
/>

The onlyMonthPicker feature in a date picker or calendar allows users to select only months, without selecting a specific day. When the multiple and range props are added, users can select multiple ranges of months.

The provided code shows how to use the DatePicker component in React with the onlyMonthPicker, multiple, and range props.

The DatePicker component is used to display the calendar and handle user input. The onlyMonthPicker prop restricts the user's selection to months only, while the multiple and range props allow the user to select multiple ranges of months.

In summary, the onlyMonthPicker feature in a date picker allows users to select only months, without selecting a specific day. When used with the multiple and range props, users can select multiple ranges of months. This is a useful feature when working with date ranges in a month-only context.

<DatePicker
  onlyMonthPicker
  multiple
  range
/>

The onlyYearPicker feature in a date picker or calendar allows users to select only years, without selecting a specific day or month. When the multiple and range props are added, users can select multiple ranges of years.

The provided code shows how to use the DatePicker component in React with the onlyYearPicker, multiple, and range props.

<DatePicker
  onlyYearPicker
  multiple
  range
/>