Skip to content

Commit 1271022

Browse files
flaviendelanglealexfauquette
flaviendelangle
authored and
alexfauquette
committed
[DatePicker] Initial commit (mui#3451)
1 parent 19d7a29 commit 1271022

File tree

512 files changed

+35545
-131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

512 files changed

+35545
-131
lines changed

‎.codesandbox/ci.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
"packages/x-license-pro",
66
"packages/grid/x-data-grid",
77
"packages/grid/x-data-grid-pro",
8-
"packages/grid/x-data-grid-generator"
8+
"packages/grid/x-data-grid-generator",
9+
"packages/x-date-pickers",
10+
"packages/x-date-pickers-pro"
911
],
1012
"publishDirectory": {
1113
"@mui/x-license-pro": "packages/x-license-pro/build",
1214
"@mui/x-data-grid": "packages/grid/x-data-grid/build",
1315
"@mui/x-data-grid-pro": "packages/grid/x-data-grid-pro/build",
14-
"@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build"
16+
"@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build",
17+
"@mui/x-date-pickers": "packages/x-date-pickers/build",
18+
"@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build"
1519
},
1620
"sandboxes": [
1721
"new",

‎.eslintrc.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,27 +84,27 @@ module.exports = {
8484
},
8585
},
8686
{
87-
files: ['packages/x-pickers/src/**/*{.ts,.tsx,.js}'],
87+
files: ['packages/x-date-pickers/src/**/*{.ts,.tsx,.js}'],
8888
excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
8989
rules: {
9090
'no-restricted-imports': [
9191
'error',
9292
{
93-
paths: ['@mui/x-pickers'],
94-
patterns: ['@mui/x-pickers/*'],
93+
paths: ['@mui/x-date-pickers'],
94+
patterns: ['@mui/x-date-pickers/*'],
9595
},
9696
],
9797
},
9898
},
9999
{
100-
files: ['packages/x-pickers-pro/src/**/*{.ts,.tsx,.js}'],
100+
files: ['packages/x-date-pickers-pro/src/**/*{.ts,.tsx,.js}'],
101101
excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', '**.test.tx', '**.test.tsx'],
102102
rules: {
103103
'no-restricted-imports': [
104104
'error',
105105
{
106-
paths: ['@mui/x-pickers-pro'],
107-
patterns: ['@mui/x-pickers-pro/*'],
106+
paths: ['@mui/x-date-pickers-pro'],
107+
patterns: ['@mui/x-date-pickers-pro/*'],
108108
},
109109
],
110110
},

‎babel.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ const defaultAlias = {
1111
'@mui/x-data-grid-generator': resolveAliasPath('./packages/grid/x-data-grid-generator/src'),
1212
'@mui/x-data-grid-pro': resolveAliasPath('./packages/grid/x-data-grid-pro/src'),
1313
'@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
14+
'@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
15+
'@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
1416
'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',
1517
docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
1618
test: resolveAliasPath('./test'),

‎docs/babel.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ const alias = {
1414
'@mui/x-data-grid': '../packages/grid/x-data-grid/src',
1515
'@mui/x-data-grid-generator': '../packages/grid/x-data-grid-generator/src',
1616
'@mui/x-data-grid-pro': '../packages/grid/x-data-grid-pro/src',
17+
'@mui/x-date-pickers': '../packages/x-date-pickers/src',
18+
'@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src',
1719
'@mui/x-license-pro': '../packages/x-license-pro/src',
1820
'@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
1921
'@mui/markdown': '../node_modules/@mui/monorepo/docs/packages/markdown',

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import TextField from '@mui/material/TextField';
3+
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
4+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5+
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
6+
7+
export default function BasicDatePicker() {
8+
const [value, setValue] = React.useState(null);
9+
10+
return (
11+
<LocalizationProvider dateAdapter={AdapterDateFns}>
12+
<DatePicker
13+
label="Basic example"
14+
value={value}
15+
onChange={(newValue) => {
16+
setValue(newValue);
17+
}}
18+
renderInput={(params) => <TextField {...params} />}
19+
/>
20+
</LocalizationProvider>
21+
);
22+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import TextField from '@mui/material/TextField';
3+
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
4+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
5+
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
6+
7+
export default function BasicDatePicker() {
8+
const [value, setValue] = React.useState<Date | null>(null);
9+
10+
return (
11+
<LocalizationProvider dateAdapter={AdapterDateFns}>
12+
<DatePicker
13+
label="Basic example"
14+
value={value}
15+
onChange={(newValue) => {
16+
setValue(newValue);
17+
}}
18+
renderInput={(params) => <TextField {...params} />}
19+
/>
20+
</LocalizationProvider>
21+
);
22+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<LocalizationProvider dateAdapter={AdapterDateFns}>
2+
<DatePicker
3+
label="Basic example"
4+
value={value}
5+
onChange={(newValue) => {
6+
setValue(newValue);
7+
}}
8+
renderInput={(params) => <TextField {...params} />}
9+
/>
10+
</LocalizationProvider>

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import TextField from '@mui/material/TextField';
4+
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
5+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
6+
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
7+
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
8+
import endOfWeek from 'date-fns/endOfWeek';
9+
import isSameDay from 'date-fns/isSameDay';
10+
import isWithinInterval from 'date-fns/isWithinInterval';
11+
import startOfWeek from 'date-fns/startOfWeek';
12+
13+
const CustomPickersDay = styled(PickersDay, {
14+
shouldForwardProp: (prop) =>
15+
prop !== 'dayIsBetween' && prop !== 'isFirstDay' && prop !== 'isLastDay',
16+
})(({ theme, dayIsBetween, isFirstDay, isLastDay }) => ({
17+
...(dayIsBetween && {
18+
borderRadius: 0,
19+
backgroundColor: theme.palette.primary.main,
20+
color: theme.palette.common.white,
21+
'&:hover, &:focus': {
22+
backgroundColor: theme.palette.primary.dark,
23+
},
24+
}),
25+
...(isFirstDay && {
26+
borderTopLeftRadius: '50%',
27+
borderBottomLeftRadius: '50%',
28+
}),
29+
...(isLastDay && {
30+
borderTopRightRadius: '50%',
31+
borderBottomRightRadius: '50%',
32+
}),
33+
}));
34+
35+
export default function CustomDay() {
36+
const [value, setValue] = React.useState(new Date());
37+
38+
const renderWeekPickerDay = (date, selectedDates, pickersDayProps) => {
39+
if (!value) {
40+
return <PickersDay {...pickersDayProps} />;
41+
}
42+
43+
const start = startOfWeek(value);
44+
const end = endOfWeek(value);
45+
46+
const dayIsBetween = isWithinInterval(date, { start, end });
47+
const isFirstDay = isSameDay(date, start);
48+
const isLastDay = isSameDay(date, end);
49+
50+
return (
51+
<CustomPickersDay
52+
{...pickersDayProps}
53+
disableMargin
54+
dayIsBetween={dayIsBetween}
55+
isFirstDay={isFirstDay}
56+
isLastDay={isLastDay}
57+
/>
58+
);
59+
};
60+
61+
return (
62+
<LocalizationProvider dateAdapter={AdapterDateFns}>
63+
<StaticDatePicker
64+
displayStaticWrapperAs="desktop"
65+
label="Week picker"
66+
value={value}
67+
onChange={(newValue) => {
68+
setValue(newValue);
69+
}}
70+
renderDay={renderWeekPickerDay}
71+
renderInput={(params) => <TextField {...params} />}
72+
inputFormat="'Week of' MMM d"
73+
/>
74+
</LocalizationProvider>
75+
);
76+
}

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import TextField from '@mui/material/TextField';
4+
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
5+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
6+
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
7+
import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
8+
import endOfWeek from 'date-fns/endOfWeek';
9+
import isSameDay from 'date-fns/isSameDay';
10+
import isWithinInterval from 'date-fns/isWithinInterval';
11+
import startOfWeek from 'date-fns/startOfWeek';
12+
13+
type CustomPickerDayProps = PickersDayProps<Date> & {
14+
dayIsBetween: boolean;
15+
isFirstDay: boolean;
16+
isLastDay: boolean;
17+
};
18+
19+
const CustomPickersDay = styled(PickersDay, {
20+
shouldForwardProp: (prop) =>
21+
prop !== 'dayIsBetween' && prop !== 'isFirstDay' && prop !== 'isLastDay',
22+
})<CustomPickerDayProps>(({ theme, dayIsBetween, isFirstDay, isLastDay }) => ({
23+
...(dayIsBetween && {
24+
borderRadius: 0,
25+
backgroundColor: theme.palette.primary.main,
26+
color: theme.palette.common.white,
27+
'&:hover, &:focus': {
28+
backgroundColor: theme.palette.primary.dark,
29+
},
30+
}),
31+
...(isFirstDay && {
32+
borderTopLeftRadius: '50%',
33+
borderBottomLeftRadius: '50%',
34+
}),
35+
...(isLastDay && {
36+
borderTopRightRadius: '50%',
37+
borderBottomRightRadius: '50%',
38+
}),
39+
})) as React.ComponentType<CustomPickerDayProps>;
40+
41+
export default function CustomDay() {
42+
const [value, setValue] = React.useState<Date | null>(new Date());
43+
44+
const renderWeekPickerDay = (
45+
date: Date,
46+
selectedDates: Array<Date | null>,
47+
pickersDayProps: PickersDayProps<Date>,
48+
) => {
49+
if (!value) {
50+
return <PickersDay {...pickersDayProps} />;
51+
}
52+
53+
const start = startOfWeek(value);
54+
const end = endOfWeek(value);
55+
56+
const dayIsBetween = isWithinInterval(date, { start, end });
57+
const isFirstDay = isSameDay(date, start);
58+
const isLastDay = isSameDay(date, end);
59+
60+
return (
61+
<CustomPickersDay
62+
{...pickersDayProps}
63+
disableMargin
64+
dayIsBetween={dayIsBetween}
65+
isFirstDay={isFirstDay}
66+
isLastDay={isLastDay}
67+
/>
68+
);
69+
};
70+
71+
return (
72+
<LocalizationProvider dateAdapter={AdapterDateFns}>
73+
<StaticDatePicker
74+
displayStaticWrapperAs="desktop"
75+
label="Week picker"
76+
value={value}
77+
onChange={(newValue) => {
78+
setValue(newValue);
79+
}}
80+
renderDay={renderWeekPickerDay}
81+
renderInput={(params) => <TextField {...params} />}
82+
inputFormat="'Week of' MMM d"
83+
/>
84+
</LocalizationProvider>
85+
);
86+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<LocalizationProvider dateAdapter={AdapterDateFns}>
2+
<StaticDatePicker
3+
displayStaticWrapperAs="desktop"
4+
label="Week picker"
5+
value={value}
6+
onChange={(newValue) => {
7+
setValue(newValue);
8+
}}
9+
renderDay={renderWeekPickerDay}
10+
renderInput={(params) => <TextField {...params} />}
11+
inputFormat="'Week of' MMM d"
12+
/>
13+
</LocalizationProvider>

0 commit comments

Comments
 (0)