Added date picker filter.

components/common/DateFilter.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { endOfYear } from 'date-fns';
+import { endOfYear, isSameDay } from 'date-fns';
 import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
@@ -112,7 +112,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
   return (
     <>
       <Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
-      {`${dateFormat(startDate, 'd LLL y', locale)} — ${dateFormat(endDate, 'd LLL y', locale)}`}
+      {dateFormat(startDate, 'd LLL y', locale)}
+      {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
     </>
   );
 };

components/forms/DatePickerForm.js

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { isAfter } from 'date-fns';
+import { isAfter, isBefore, isSameDay } from 'date-fns';
 import Calendar from 'components/common/Calendar';
 import Button from 'components/common/Button';
 import { FormButtons } from 'components/layout/FormLayout';
 import { getDateRangeValues } from 'lib/date';
 import styles from './DatePickerForm.module.css';
+import ButtonGroup from '../common/ButtonGroup';
+
+const FILTER_DAY = 0;
+const FILTER_RANGE = 1;
 
 export default function DatePickerForm({
   startDate: defaultStartDate,
@@ -15,21 +19,59 @@ export default function DatePickerForm({
   onChange,
   onClose,
 }) {
+  const [selected, setSelected] = useState(
+    isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
+  );
+  const [date, setDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
 
+  const disabled =
+    selected === FILTER_DAY
+      ? isAfter(minDate, date) && isBefore(maxDate, date)
+      : isAfter(startDate, endDate);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="button.single-day" defaultMessage="Single day" />,
+      value: FILTER_DAY,
+    },
+    {
+      label: <FormattedMessage id="button.date-range" defaultMessage="Date range" />,
+      value: FILTER_RANGE,
+    },
+  ];
+
   function handleSave() {
-    onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    if (selected === FILTER_DAY) {
+      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
+    } else {
+      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    }
   }
 
   return (
     <div className={styles.container}>
+      <div className={styles.filter}>
+        <ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
+      </div>
       <div className={styles.calendars}>
-        <Calendar date={startDate} minDate={minDate} maxDate={endDate} onChange={setStartDate} />
+        {selected === FILTER_DAY ? (
-        <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
+        ) : (
+          <>
+            <Calendar
+              date={startDate}
+              minDate={minDate}
+              maxDate={endDate}
+              onChange={setStartDate}
+            />
+            <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          </>
+        )}
       </div>
       <FormButtons>
-        <Button variant="action" onClick={handleSave} disabled={isAfter(startDate, endDate)}>
+        <Button variant="action" onClick={handleSave} disabled={disabled}>
           <FormattedMessage id="button.save" defaultMessage="Save" />
         </Button>
         <Button onClick={onClose}>

components/forms/DatePickerForm.module.css

@@ -1,25 +1,40 @@
 .container {
   display: flex;
   flex-direction: column;
-  width: 800px;
   max-width: 100vw;
 }
 
 .calendars {
   display: flex;
+  justify-content: center;
 }
 
-.calendars > div:first-child {
+.calendars > div {
-  padding-right: 20px;
+  width: 380px;
-  border-right: 1px solid var(--gray300);
 }
 
-.calendars > div:last-child {
+.calendars > div + div {
+  margin-left: 20px;
   padding-left: 20px;
+  border-left: 1px solid var(--gray300);
+}
+
+.filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
 @media only screen and (max-width: 768px) {
   .calendars {
     flex-direction: column;
   }
+
+  .calendars > div + div {
+    padding: 0;
+    margin-left: 0;
+    margin-top: 20px;
+    border: 0;
+  }
 }

lib/date.js

@@ -89,7 +89,7 @@ export function getDateRange(value) {
 
 export function getDateRangeValues(startDate, endDate) {
   let unit = 'year';
-  if (differenceInHours(endDate, startDate) <= 72) {
+  if (differenceInHours(endDate, startDate) <= 48) {
     unit = 'hour';
   } else if (differenceInCalendarDays(endDate, startDate) <= 90) {
     unit = 'day';