Added month select component.

components/input/DateFilter.js

@@ -3,7 +3,7 @@ import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
@@ -135,8 +135,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
         <Icons.Calendar />
       </Icon>
       <Text>
-        {dateFormat(startDate, 'd LLL y', locale)}
-        {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
+        {formatDate(startDate, 'd LLL y', locale)}
+        {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
       </Text>
     </Flexbox>
   );

components/input/MonthSelect.js

@@ -0,0 +1,51 @@
+import { useRef, useState } from 'react';
+import { Text, Icon, CalendarMonthSelect, CalendarYearSelect, Button } from 'react-basics';
+import { startOfMonth, endOfMonth } from 'date-fns';
+import Icons from 'components/icons';
+import { useLocale } from 'hooks';
+import { formatDate } from 'lib/date';
+import { getDateLocale } from 'lib/lang';
+import styles from './MonthSelect.module.css';
+
+const MONTH = 'month';
+const YEAR = 'year';
+
+export function MonthSelect({ date = new Date(), onChange }) {
+  const { locale } = useLocale();
+  const [select, setSelect] = useState(null);
+  const month = formatDate(date, 'MMMM', locale);
+  const year = date.getFullYear();
+  const ref = useRef();
+
+  const handleSelect = value => {
+    setSelect(state => (state !== value ? value : null));
+  };
+
+  const handleChange = date => {
+    onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
+    setSelect(null);
+  };
+
+  return (
+    <>
+      <div ref={ref} className={styles.container}>
+        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(MONTH)}>
+          <Text>{month}</Text>
+          <Icon size="sm">{select === MONTH ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
+        </Button>
+        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(YEAR)}>
+          <Text>{year}</Text>
+          <Icon size="sm">{select === YEAR ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
+        </Button>
+      </div>
+      {select === MONTH && (
+        <CalendarMonthSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
+      )}
+      {select === YEAR && (
+        <CalendarYearSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
+      )}
+    </>
+  );
+}
+
+export default MonthSelect;

components/input/MonthSelect.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}