[DatePicker] Initial commit

.codesandbox/ci.json

@@ -5,13 +5,17 @@
     "packages/x-license-pro",
     "packages/grid/x-data-grid",
     "packages/grid/x-data-grid-pro",
-    "packages/grid/x-data-grid-generator"
+    "packages/grid/x-data-grid-generator",
+    "packages/x-date-pickers",
+    "packages/x-date-pickers-pro"
   ],
   "publishDirectory": {
     "@mui/x-license-pro": "packages/x-license-pro/build",
     "@mui/x-data-grid": "packages/grid/x-data-grid/build",
     "@mui/x-data-grid-pro": "packages/grid/x-data-grid-pro/build",
-    "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build"
+    "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build",
+    "@mui/x-date-pickers": "packages/x-date-pickers/build",
+    "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build"
   },
   "sandboxes": [
     "new",

.eslintrc.js

@@ -84,27 +84,27 @@ module.exports = {
       },
     },
     {
-      files: ['packages/x-pickers/src/**/*{.ts,.tsx,.js}'],
+      files: ['packages/x-date-pickers/src/**/*{.ts,.tsx,.js}'],
       excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
       rules: {
         'no-restricted-imports': [
           'error',
           {
-            paths: ['@mui/x-pickers'],
-            patterns: ['@mui/x-pickers/*'],
+            paths: ['@mui/x-date-pickers'],
+            patterns: ['@mui/x-date-pickers/*'],
           },
         ],
       },
     },
     {
-      files: ['packages/x-pickers-pro/src/**/*{.ts,.tsx,.js}'],
+      files: ['packages/x-date-pickers-pro/src/**/*{.ts,.tsx,.js}'],
       excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
       rules: {
         'no-restricted-imports': [
           'error',
           {
-            paths: ['@mui/x-pickers-pro'],
-            patterns: ['@mui/x-pickers-pro/*'],
+            paths: ['@mui/x-date-pickers-pro'],
+            patterns: ['@mui/x-date-pickers-pro/*'],
           },
         ],
       },

babel.config.js

@@ -11,6 +11,8 @@ const defaultAlias = {
   '@mui/x-data-grid-generator': resolveAliasPath('./packages/grid/x-data-grid-generator/src'),
   '@mui/x-data-grid-pro': resolveAliasPath('./packages/grid/x-data-grid-pro/src'),
   '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
+  '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
+  '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
   'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',
   docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
   test: resolveAliasPath('./test'),

docs/babel.config.js

@@ -14,6 +14,8 @@ const alias = {
   '@mui/x-data-grid': '../packages/grid/x-data-grid/src',
   '@mui/x-data-grid-generator': '../packages/grid/x-data-grid-generator/src',
   '@mui/x-data-grid-pro': '../packages/grid/x-data-grid-pro/src',
+  '@mui/x-date-pickers': '../packages/x-date-pickers/src',
+  '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src',
   '@mui/x-license-pro': '../packages/x-license-pro/src',
   '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
   '@mui/markdown': '../node_modules/@mui/monorepo/docs/packages/markdown',

docs/data/date-pickers/date-picker/BasicDatePicker.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function BasicDatePicker() {
+  const [value, setValue] = React.useState(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        label="Basic example"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/BasicDatePicker.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function BasicDatePicker() {
+  const [value, setValue] = React.useState<Date | null>(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        label="Basic example"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/BasicDatePicker.tsx.preview

@@ -0,0 +1,10 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <DatePicker
+    label="Basic example"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+  />
+</LocalizationProvider>

docs/data/date-pickers/date-picker/CustomDay.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import endOfWeek from 'date-fns/endOfWeek';
+import isSameDay from 'date-fns/isSameDay';
+import isWithinInterval from 'date-fns/isWithinInterval';
+import startOfWeek from 'date-fns/startOfWeek';
+
+const CustomPickersDay = styled(PickersDay, {
+  shouldForwardProp: (prop) =>
+    prop !== 'dayIsBetween' && prop !== 'isFirstDay' && prop !== 'isLastDay',
+})(({ theme, dayIsBetween, isFirstDay, isLastDay }) => ({
+  ...(dayIsBetween && {
+    borderRadius: 0,
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.common.white,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  }),
+  ...(isFirstDay && {
+    borderTopLeftRadius: '50%',
+    borderBottomLeftRadius: '50%',
+  }),
+  ...(isLastDay && {
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+  }),
+}));
+
+export default function CustomDay() {
+  const [value, setValue] = React.useState(new Date());
+
+  const renderWeekPickerDay = (date, selectedDates, pickersDayProps) => {
+    if (!value) {
+      return <PickersDay {...pickersDayProps} />;
+    }
+
+    const start = startOfWeek(value);
+    const end = endOfWeek(value);
+
+    const dayIsBetween = isWithinInterval(date, { start, end });
+    const isFirstDay = isSameDay(date, start);
+    const isLastDay = isSameDay(date, end);
+
+    return (
+      <CustomPickersDay
+        {...pickersDayProps}
+        disableMargin
+        dayIsBetween={dayIsBetween}
+        isFirstDay={isFirstDay}
+        isLastDay={isLastDay}
+      />
+    );
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <StaticDatePicker
+        displayStaticWrapperAs="desktop"
+        label="Week picker"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderDay={renderWeekPickerDay}
+        renderInput={(params) => <TextField {...params} />}
+        inputFormat="'Week of' MMM d"
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/CustomDay.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import endOfWeek from 'date-fns/endOfWeek';
+import isSameDay from 'date-fns/isSameDay';
+import isWithinInterval from 'date-fns/isWithinInterval';
+import startOfWeek from 'date-fns/startOfWeek';
+
+type CustomPickerDayProps = PickersDayProps<Date> & {
+  dayIsBetween: boolean;
+  isFirstDay: boolean;
+  isLastDay: boolean;
+};
+
+const CustomPickersDay = styled(PickersDay, {
+  shouldForwardProp: (prop) =>
+    prop !== 'dayIsBetween' && prop !== 'isFirstDay' && prop !== 'isLastDay',
+})<CustomPickerDayProps>(({ theme, dayIsBetween, isFirstDay, isLastDay }) => ({
+  ...(dayIsBetween && {
+    borderRadius: 0,
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.common.white,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  }),
+  ...(isFirstDay && {
+    borderTopLeftRadius: '50%',
+    borderBottomLeftRadius: '50%',
+  }),
+  ...(isLastDay && {
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+  }),
+})) as React.ComponentType<CustomPickerDayProps>;
+
+export default function CustomDay() {
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  const renderWeekPickerDay = (
+    date: Date,
+    selectedDates: Array<Date | null>,
+    pickersDayProps: PickersDayProps<Date>,
+  ) => {
+    if (!value) {
+      return <PickersDay {...pickersDayProps} />;
+    }
+
+    const start = startOfWeek(value);
+    const end = endOfWeek(value);
+
+    const dayIsBetween = isWithinInterval(date, { start, end });
+    const isFirstDay = isSameDay(date, start);
+    const isLastDay = isSameDay(date, end);
+
+    return (
+      <CustomPickersDay
+        {...pickersDayProps}
+        disableMargin
+        dayIsBetween={dayIsBetween}
+        isFirstDay={isFirstDay}
+        isLastDay={isLastDay}
+      />
+    );
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <StaticDatePicker
+        displayStaticWrapperAs="desktop"
+        label="Week picker"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderDay={renderWeekPickerDay}
+        renderInput={(params) => <TextField {...params} />}
+        inputFormat="'Week of' MMM d"
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/CustomDay.tsx.preview

@@ -0,0 +1,13 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <StaticDatePicker
+    displayStaticWrapperAs="desktop"
+    label="Week picker"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderDay={renderWeekPickerDay}
+    renderInput={(params) => <TextField {...params} />}
+    inputFormat="'Week of' MMM d"
+  />
+</LocalizationProvider>

docs/data/date-pickers/date-picker/CustomInput.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomInput() {
+  const [value, setValue] = React.useState(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        label="Custom input"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={({ inputRef, inputProps, InputProps }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <input ref={inputRef} {...inputProps} />
+            {InputProps?.endAdornment}
+          </Box>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/CustomInput.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomInput() {
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        label="Custom input"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={({ inputRef, inputProps, InputProps }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <input ref={inputRef} {...inputProps} />
+            {InputProps?.endAdornment}
+          </Box>
+        )}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-picker/CustomInput.tsx.preview

@@ -0,0 +1,15 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <DatePicker
+    label="Custom input"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={({ inputRef, inputProps, InputProps }) => (
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <input ref={inputRef} {...inputProps} />
+        {InputProps?.endAdornment}
+      </Box>
+    )}
+  />
+</LocalizationProvider>