Quarter year picker (Hacker0x01#1877)

* Add basic quarter picker as a variation of month picker
- added similar tests and css

* Add basic quarter picker as a variation of month picker
- added similar tests and css

* Added date utils tests

* Reverted accidental change of month picker test

Author: rogier2012

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

@@ -61,6 +61,8 @@ import TimeInput from "../../examples/timeInput";
 import StrictParsing from "../../examples/strictParsing";
 import MonthPicker from "../../examples/monthPicker";
 import RangeMonthPicker from "../../examples/rangeMonthPicker";
+import QuarterPicker from "../../examples/quarterPicker";
+import RangeQuarterPicker from "../../examples/rangeQuarterPicker";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -303,6 +305,14 @@ export default class exampleComponents extends React.Component {
     {
       title: "Range Month Picker",
       component: RangeMonthPicker
+    },
+    {
+      title: "Quarter Picker",
+      component: QuarterPicker
+    },
+    {
+      title: "Range Quarter Picker",
+      component: RangeQuarterPicker
     }
   ];
 

docs-site/src/examples/quarterPicker.js

@@ -0,0 +1,11 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={date => setStartDate(date)}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};

docs-site/src/examples/rangeQuarterPicker.js

@@ -0,0 +1,26 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState(new Date("2014/07/08"));
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={date => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={date => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+    </>
+  );
+};

src/calendar.jsx

@@ -87,6 +87,7 @@ export default class Calendar extends React.Component {
     showTimeSelect: PropTypes.bool,
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
+    showQuarterYearPicker: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
     timeIntervals: PropTypes.number,
@@ -361,7 +362,7 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.decreaseMonth;
 
-    if (this.props.showMonthYearPicker) {
+    if (this.props.showMonthYearPicker || this.props.showQuarterYearPicker) {
       clickHandler = this.decreaseYear;
     }
 
@@ -376,7 +377,7 @@ export default class Calendar extends React.Component {
         className={classes.join(" ")}
         onClick={clickHandler}
       >
-        {this.props.showMonthYearPicker
+        {this.props.showMonthYearPicker || this.props.showQuarterYearPicker
           ? this.props.previousYearButtonLabel
           : this.props.previousMonthButtonLabel}
       </button>
@@ -421,7 +422,7 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.increaseMonth;
 
-    if (this.props.showMonthYearPicker) {
+    if (this.props.showMonthYearPicker || this.props.showQuarterYearPicker) {
       clickHandler = this.increaseYear;
     }
 
@@ -436,7 +437,7 @@ export default class Calendar extends React.Component {
         className={classes.join(" ")}
         onClick={clickHandler}
       >
-        {this.props.showMonthYearPicker
+        {this.props.showMonthYearPicker || this.props.showQuarterYearPicker
           ? this.props.nextYearButtonLabel
           : this.props.nextMonthButtonLabel}
       </button>
@@ -609,7 +610,7 @@ export default class Calendar extends React.Component {
           }}
           className="react-datepicker__month-container"
         >
-          {!this.props.showMonthYearPicker
+          {!this.props.showMonthYearPicker && !this.props.showQuarterYearPicker
             ? this.props.renderCustomHeader
               ? this.renderCustomHeader({ monthDate, i })
               : this.renderDefaultHeader({ monthDate, i })
@@ -647,6 +648,7 @@ export default class Calendar extends React.Component {
             renderDayContents={this.props.renderDayContents}
             disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
             showMonthYearPicker={this.props.showMonthYearPicker}
+            showQuarterYearPicker={this.props.showQuarterYearPicker}
           />
         </div>
       );

src/date_utils.js

@@ -19,12 +19,14 @@ import getHours from "date-fns/getHours";
 import getDay from "date-fns/getDay";
 import getDate from "date-fns/getDate";
 import getMonth from "date-fns/getMonth";
+import getQuarter from "date-fns/getQuarter";
 import getYear from "date-fns/getYear";
 import getTime from "date-fns/getTime";
 import setSeconds from "date-fns/setSeconds";
 import setMinutes from "date-fns/setMinutes";
 import setHours from "date-fns/setHours";
 import setMonth from "date-fns/setMonth";
+import setQuarter from "date-fns/setQuarter";
 import setYear from "date-fns/setYear";
 import min from "date-fns/min";
 import max from "date-fns/max";
@@ -34,6 +36,7 @@ import differenceInCalendarWeeks from "date-fns/differenceInCalendarWeeks";
 import startOfDay from "date-fns/startOfDay";
 import startOfWeek from "date-fns/startOfWeek";
 import startOfMonth from "date-fns/startOfMonth";
+import startOfQuarter from "date-fns/startOfQuarter";
 import startOfYear from "date-fns/startOfYear";
 import endOfDay from "date-fns/endOfDay";
 import endOfWeek from "date-fns/endOfWeek";
@@ -42,6 +45,7 @@ import dfIsEqual from "date-fns/isEqual";
 import dfIsSameDay from "date-fns/isSameDay";
 import dfIsSameMonth from "date-fns/isSameMonth";
 import dfIsSameYear from "date-fns/isSameYear";
+import dfIsSameQuarter from "date-fns/isSameQuarter";
 import isAfter from "date-fns/isAfter";
 import isBefore from "date-fns/isBefore";
 import isWithinInterval from "date-fns/isWithinInterval";
@@ -168,7 +172,7 @@ export function setTime(date, { hour = 0, minute = 0, second = 0 }) {
   return setHours(setMinutes(setSeconds(date, second), minute), hour);
 }
 
-export { setMonth, setYear };
+export { setMonth, setYear, setQuarter };
 
 // ** Date Getters **
 
@@ -178,6 +182,7 @@ export {
   getMinutes,
   getHours,
   getMonth,
+  getQuarter,
   getYear,
   getDay,
   getDate,
@@ -212,6 +217,10 @@ export function getStartOfMonth(date) {
   return startOfMonth(date);
 }
 
+export function getStartOfQuarter(date) {
+  return startOfQuarter(date);
+}
+
 export function getStartOfToday() {
   return startOfDay(newDate());
 }
@@ -256,6 +265,14 @@ export function isSameMonth(date1, date2) {
   }
 }
 
+export function isSameQuarter(date1, date2) {
+  if (date1 && date2) {
+    return dfIsSameQuarter(date1, date2);
+  } else {
+    return !date1 && !date2;
+  }
+}
+
 export function isSameDay(date1, date2) {
   if (date1 && date2) {
     return dfIsSameDay(date1, date2);
@@ -345,6 +362,10 @@ export function getMonthShortInLocale(month, locale) {
   return formatDate(setMonth(newDate(), month), "LLL", locale);
 }
 
+export function getQuarterShortInLocale(quarter, locale) {
+  return formatDate(setQuarter(newDate(), quarter), "QQQ", locale);
+}
+
 // ** Utils for some components **
 
 export function isDayDisabled(
@@ -402,6 +423,38 @@ export function isMonthinRange(startDate, endDate, m, day) {
   }
 }
 
+export function isQuarterDisabled(
+  quarter,
+  { minDate, maxDate, excludeDates, includeDates, filterDate } = {}
+) {
+  return (
+    isOutOfBounds(quarter, { minDate, maxDate }) ||
+    (excludeDates &&
+      excludeDates.some(excludeDate => isSameQuarter(quarter, excludeDate))) ||
+    (includeDates &&
+      !includeDates.some(includeDate => isSameQuarter(quarter, includeDate))) ||
+    (filterDate && !filterDate(newDate(quarter))) ||
+    false
+  );
+}
+
+export function isQuarterInRange(startDate, endDate, q, day) {
+  const startDateYear = getYear(startDate);
+  const startDateQuarter = getQuarter(startDate);
+  const endDateYear = getYear(endDate);
+  const endDateQuarter = getQuarter(endDate);
+  const dayYear = getYear(day);
+  if (startDateYear === endDateYear && startDateYear === dayYear) {
+    return startDateQuarter <= q && q <= endDateQuarter;
+  } else if (startDateYear < endDateYear) {
+    return (
+      (dayYear === startDateYear && startDateQuarter <= q) ||
+      (dayYear === endDateYear && endDateQuarter >= q) ||
+      (dayYear < endDateYear && dayYear > startDateYear)
+    );
+  }
+}
+
 export function isOutOfBounds(day, { minDate, maxDate } = {}) {
   return (
     (minDate && differenceInCalendarDays(day, minDate) < 0) ||

src/index.jsx

@@ -149,6 +149,7 @@ export default class DatePicker extends React.Component {
     shouldCloseOnSelect: PropTypes.bool,
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
+    showQuarterYearPicker: PropTypes.bool,
     showTimeSelect: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
@@ -197,6 +198,7 @@ export default class DatePicker extends React.Component {
       showTimeSelect: false,
       showTimeInput: false,
       showMonthYearPicker: false,
+      showQuarterYearPicker: false,
       strictParsing: false,
       timeIntervals: 30,
       timeCaption: "Time",
@@ -694,6 +696,7 @@ export default class DatePicker extends React.Component {
         onMonthMouseLeave={this.props.onMonthMouseLeave}
         showTimeInput={this.props.showTimeInput}
         showMonthYearPicker={this.props.showMonthYearPicker}
+        showQuarterYearPicker={this.props.showQuarterYearPicker}
       >
         {this.props.children}
       </WrappedCalendar>