Implement datepicker with ranges

.yarnrc.yml

@@ -1,3 +1,5 @@
+checksumBehavior: update
+
 compressionLevel: mixed
 
 enableGlobalCache: false

packages/web-console/package.json

@@ -68,6 +68,7 @@
     "prop-types": "^15.8.1",
     "ramda": "0.27.1",
     "react": "17.0.2",
+    "react-calendar": "^4.0.0",
     "react-contextmenu": "2.14.0",
     "react-dom": "17.0.2",
     "react-highlight-words": "^0.20.0",

packages/web-console/src/components/Calendar/index.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import ReactCalendar from "react-calendar"
+import type { CalendarProps } from "react-calendar"
+import { LooseValue } from "react-calendar/dist/cjs/shared/types"
+
+type Props = {
+  className?: string
+  min: Date
+  max: Date
+  value: LooseValue | undefined
+  selectRange: boolean
+  onChange: (value: CalendarProps["value"]) => void
+}
+
+export const Calendar = ({
+  className,
+  min,
+  max,
+  value,
+  onChange,
+  selectRange,
+}: Props) => (
+  <ReactCalendar
+    className={className}
+    defaultValue={value}
+    minDate={min}
+    maxDate={max}
+    minDetail="month"
+    maxDetail="month"
+    returnValue="start"
+    onChange={(date) => onChange(date)}
+    selectRange={selectRange}
+  />
+)