feat: create date range picker field

conceptadev · Dec 18, 2024 · 38b41a3 · 38b41a3
1 parent bcc5ac1
commit 38b41a3
Show file tree

Hide file tree

Showing 11 changed files with 415 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/packages/.DS_Store b/packages/.DS_Store
diff --git a/packages/react-material-ui/.DS_Store b/packages/react-material-ui/.DS_Store
diff --git a/packages/react-material-ui/package.json b/packages/react-material-ui/package.json
@@ -40,6 +40,7 @@
     "@rjsf/mui": "^5.0.0-beta.13",
     "@rjsf/utils": "^5.0.0-beta.13",
     "@rjsf/validator-ajv6": "^5.0.0-beta.13",
+    "date-fns": "^4.1.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {

diff --git a/packages/react-material-ui/src/.DS_Store b/packages/react-material-ui/src/.DS_Store
diff --git a/packages/react-material-ui/src/components/.DS_Store b/packages/react-material-ui/src/components/.DS_Store
diff --git a/packages/react-material-ui/src/components/DateRangePicker/DateInput/Styles.ts b/packages/react-material-ui/src/components/DateRangePicker/DateInput/Styles.ts
@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles';
+
+export const CustomInput = styled('input')(({}) => ({
+  border: 'none',
+  textAlign: 'center',
+  textTransform: 'uppercase',
+  outline: 'none',
+  fontFamily: 'inherit',
+  fontSize: '1rem',
+  width: '112px',
+  '&::-webkit-calendar-picker-indicator': {
+    display: 'none',
+  },
+  '&::-moz-calendar-picker-indicator': {
+    display: 'none',
+  },
+}));
diff --git a/packages/react-material-ui/src/components/DateRangePicker/DateInput/index.tsx b/packages/react-material-ui/src/components/DateRangePicker/DateInput/index.tsx
@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+import { CustomInput } from './Styles';
+
+type Props = InputHTMLAttributes<HTMLInputElement>;
+
+const DateInput = forwardRef((props: Props, ref: any) => {
+  return <CustomInput ref={ref} type="date" {...props} />;
+});
+
+export default DateInput;