add selectsRange example for range quarter picker

Author: p-rogas

docs-site/src/components/Examples/index.js

@@ -83,6 +83,7 @@ import RangeMonthPicker from "../../examples/rangeMonthPicker";
 import RangeMonthPickerSelectsRange from "../../examples/rangeMonthPickerSelectsRange";
 import QuarterPicker from "../../examples/quarterPicker";
 import RangeQuarterPicker from "../../examples/rangeQuarterPicker";
+import RangeQuarterPickerSelectsRange from "../../examples/rangeQuarterPickerSelectsRange";
 import OnCalendarChangeStateCallbacks from "../../examples/onCalendarOpenStateCallbacks";
 import CustomTimeInput from "../../examples/customTimeInput";
 import CloseOnScroll from "../../examples/closeOnScroll";
@@ -411,6 +412,10 @@ export default class exampleComponents extends React.Component {
       title: "Range Quarter Picker",
       component: RangeQuarterPicker,
     },
+    {
+      title: "Range Quarter Picker for one quarter picker",
+      component: RangeQuarterPickerSelectsRange,
+    },
     {
       title: "Read only datepicker",
       component: ReadOnly,

docs-site/src/examples/rangeQuarterPickerSelectsRange.js

@@ -0,0 +1,21 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState(null);
+
+  const handleChange = ([newStartDate, newEndDate]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};