(createUtilsService('date-fns'));
6 |
7 | export const withUtilsService = (Component: React.ComponentType
) => {
8 | const withUtilsService: React.SFC> = (props) => (
9 |
10 | {(service) => }
11 |
12 | );
13 |
14 | withUtilsService.displayName = `withUtilsService(${Component.displayName || Component.name})`;
15 |
16 | return withUtilsService;
17 | };
18 |
--------------------------------------------------------------------------------
/docs/_shared/svgIcons/GithubIcon.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { SvgIcon } from '@material-ui/core';
3 |
4 | const GitHub = (props) => (
5 |
6 |
7 |
8 | );
9 |
10 | export default GitHub;
11 |
--------------------------------------------------------------------------------
/docs/_shared/svgIcons/KawaiiIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import useMediaQuery from '@material-ui/core/useMediaQuery';
3 | import { NoSsr } from '@material-ui/core';
4 | import { getRandomItem } from 'utils/helpers';
5 | import { useTheme } from '@material-ui/core/styles';
6 | import { Backpack, Ghost, Cat, IceCream, Browser, SpeechBubble, KawaiiProps } from 'react-kawaii';
7 |
8 | const icons = {
9 | ghost: Ghost,
10 | cat: Cat,
11 | backpack: Backpack,
12 | iceCream: IceCream,
13 | browser: Browser,
14 | bubble: SpeechBubble,
15 | };
16 |
17 | function getRandomIcon() {
18 | // @ts-ignore
19 | if (process.browser && window.Cypress) {
20 | return icons.ghost;
21 | }
22 |
23 | const icon = getRandomItem(Object.keys(icons));
24 | return icons[icon as keyof typeof icons];
25 | }
26 |
27 | interface KawaiiIconProps extends KawaiiProps {
28 | icon?: keyof typeof icons;
29 | className?: string;
30 | }
31 |
32 | const KawaiiIcon: React.FunctionComponent = ({ icon, size, ...other }) => {
33 | const theme = useTheme();
34 | const isXs = useMediaQuery(theme.breakpoints.down('xs'));
35 | const calculatedSize = size || isXs ? 230 : 320;
36 |
37 | const Component = React.useMemo(() => (icon ? icons[icon] : getRandomIcon()), [icon]);
38 |
39 | return (
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | KawaiiIcon.defaultProps = {
47 | mood: 'excited',
48 | };
49 |
50 | export default KawaiiIcon;
51 |
--------------------------------------------------------------------------------
/docs/_shared/svgIcons/LightbulbIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { SvgIcon } from '@material-ui/core';
3 |
4 | function LightbulbOutline(props: any) {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | LightbulbOutline.muiName = 'SvgIcon';
13 |
14 | export default LightbulbOutline;
15 |
--------------------------------------------------------------------------------
/docs/_shared/svgIcons/Logo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useTheme } from '@material-ui/core/styles';
3 |
4 | // ! This is very handcrafted svg for SSR. Don't make your logos this way 🤦🤦🤦
5 | export default function Logo() {
6 | const theme = useTheme();
7 | return (
8 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/docs/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['next/babel', '@zeit/next-typescript/babel'],
3 | plugins: [
4 | '@babel/plugin-proposal-optional-chaining',
5 | '@babel/plugin-proposal-nullish-coalescing-operator',
6 | [
7 | 'babel-plugin-module-resolver',
8 | {
9 | root: ['./'],
10 | alias: {
11 | '@material-ui/pickers/CalendarSkeleton': '@material-ui/pickers/src/CalendarSkeleton',
12 | },
13 | },
14 | ],
15 | ],
16 | };
17 |
--------------------------------------------------------------------------------
/docs/fakeApi/randomDate.ts:
--------------------------------------------------------------------------------
1 | import { getDaysInMonth, isValid } from 'date-fns';
2 | import { NowRequest, NowResponse } from '@now/node';
3 |
4 | function getRandomNumber(min: number, max: number) {
5 | return Math.round(Math.random() * (max - min) + min);
6 | }
7 |
8 | // eslint-disable-next-line consistent-return
9 | export default function randomDate(req: NowRequest, res: NowResponse) {
10 | const { month } = req.query;
11 |
12 | if (!month || typeof month !== 'string') {
13 | res.status(400);
14 | return res.json({
15 | reason: 'month query param is required',
16 | });
17 | }
18 |
19 | const date = new Date(month);
20 | if (!isValid(date)) {
21 | res.status(422);
22 | return res.json({
23 | reason: 'cannot parse month value',
24 | });
25 | }
26 |
27 | setTimeout(() => {
28 | const daysInMonth = getDaysInMonth(date);
29 | const daysToHighlight = [1, 2, 3].map(() => getRandomNumber(1, daysInMonth));
30 |
31 | res.json({ daysToHighlight });
32 | }, 500); // fake some long work
33 | }
34 |
--------------------------------------------------------------------------------
/docs/layout/components/DrawerMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from 'next/link';
3 | import NavigationMenu from './NavigationMenu';
4 | import { version } from '@material-ui/pickers/package.json';
5 | import { Divider, Toolbar, Typography, Theme } from '@material-ui/core';
6 | import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
7 |
8 | const styles = (theme: Theme) =>
9 | createStyles({
10 | drawerRoot: {
11 | width: 250,
12 | },
13 | drawerToolbar: {
14 | display: 'flex',
15 | flexDirection: 'column',
16 | justifyContent: 'center',
17 | alignItems: 'flex-start',
18 | },
19 | headerLink: {
20 | cursor: 'pointer',
21 | textDecoration: 'none',
22 | transition: 'color .2s ease-in-out',
23 | '&:hover': {
24 | color: theme.palette.primary.dark,
25 | textDecoration: 'underline',
26 | },
27 | },
28 | });
29 |
30 | const DrawerMenu: React.SFC> = ({ classes }) => (
31 |
32 |
33 |
34 |
35 | Material UI Pickers
36 |
37 |
38 |
39 |
40 | v{version}
41 |
42 |
43 |
44 |
45 |
46 |
{navItems.map(this.mapNavigation(0))}
;
35 | }
36 | }
37 |
38 | export default withRouter(NavigationMenu);
39 |
--------------------------------------------------------------------------------
/docs/layout/components/navigationMap.ts:
--------------------------------------------------------------------------------
1 | import PropTypesDoc from '../../prop-types.json';
2 |
3 | export const navItems = [
4 | {
5 | title: 'Getting Started',
6 | children: [
7 | { title: 'Installation', href: '/getting-started/installation' },
8 | { title: 'Usage', href: '/getting-started/usage' },
9 | { title: 'Parsing dates', href: '/getting-started/parsing' },
10 | ],
11 | },
12 | {
13 | title: 'Localization',
14 | children: [
15 | { title: 'Using date-fns', href: '/localization/date-fns' },
16 | { title: 'Using moment', href: '/localization/moment' },
17 | { title: 'Additional Calendar Systems', href: '/localization/calendar-systems' },
18 | ],
19 | },
20 | {
21 | title: 'Components Demo',
22 | children: [
23 | { title: 'Date Picker', href: '/demo/datepicker' },
24 | { title: 'Date Range Picker', href: '/demo/daterangepicker' },
25 | { title: 'Time Picker', href: '/demo/timepicker' },
26 | { title: 'Date & Time Picker', href: '/demo/datetime-picker' },
27 | ],
28 | },
29 | {
30 | title: 'Components API',
31 | children: Object.keys(PropTypesDoc)
32 | .filter((component) => !component.match(/^(Mobile|Desktop|Static)/))
33 | .map((component) => ({
34 | title: component,
35 | as: `/api/${component}`,
36 | href: `/api/props?component=${component}`,
37 | })),
38 | },
39 | {
40 | title: 'Guides',
41 | children: [
42 | { title: 'TypeScript', href: '/guides/typescript' },
43 | { title: 'Accessibility', href: '/guides/accessibility' },
44 | { title: 'Form integration', href: '/guides/forms' },
45 | { title: 'CSS overrides', href: '/guides/css-overrides' },
46 | { title: 'Passing date adapter', href: '/guides/date-adapter-passing' },
47 | { title: 'Date management customization', href: '/guides/date-io-customization' },
48 | {
49 | title: 'Open pickers programmatically',
50 | href: '/guides/controlling-programmatically',
51 | },
52 | { title: 'Static inner components', href: '/guides/static-components' },
53 | { title: 'Updating to v3', href: '/guides/upgrading-to-v3' },
54 | ],
55 | },
56 | ] as const;
57 |
--------------------------------------------------------------------------------
/docs/loaders/example-loader.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const path = require('path');
3 | const safeJsonStringify = require('safe-json-stringify');
4 |
5 | const root = path.resolve(__dirname, '..');
6 |
7 | module.exports = function exampleLoader(source) {
8 | const relativePath = path.relative(root, this.resource);
9 |
10 | const escapedRawSource = safeJsonStringify(source.replace(/'/g, '"'));
11 | const sourceWithExportedContext =
12 | source +
13 | `\nexport const raw = ${escapedRawSource}` +
14 | `\nexport const relativePath = "${relativePath}"`;
15 |
16 | return sourceWithExportedContext;
17 | };
18 |
--------------------------------------------------------------------------------
/docs/notifications.json:
--------------------------------------------------------------------------------
1 | []
2 |
--------------------------------------------------------------------------------
/docs/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import sinon from 'sinon';
2 | import React from 'react';
3 | import App from 'next/app';
4 | import cookies from 'next-cookies';
5 | import getPageContext from '../utils/getPageContext';
6 | import { PageWithContexts, ThemeType } from '../layout/PageWithContext';
7 |
8 | if (process.env.VISUAL_TESTING) {
9 | const now = new Date('2019-01-01T09:41:00.000Z');
10 | sinon.useFakeTimers(now.getTime());
11 | }
12 |
13 | class MyApp extends App<{ theme: ThemeType }> {
14 | pageContext = getPageContext();
15 |
16 | static async getInitialProps({ Component, ctx }: any) {
17 | let pageProps = {};
18 | const { theme } = cookies(ctx);
19 |
20 | if (Component.getInitialProps) {
21 | pageProps = await Component.getInitialProps(ctx);
22 | }
23 |
24 | return { theme, pageProps };
25 | }
26 |
27 | componentDidMount() {
28 | // Remove the server-side injected CSS.
29 | const jssStyles = document.querySelector('#jss-server-side');
30 | if (jssStyles && jssStyles.parentNode) {
31 | jssStyles.parentNode.removeChild(jssStyles);
32 | }
33 | }
34 |
35 | render() {
36 | const { Component, pageProps, theme } = this.props;
37 |
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
46 | export default MyApp;
47 |
--------------------------------------------------------------------------------
/docs/pages/_error.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from 'react';
3 | import KawaiiIcon from '_shared/svgIcons/KawaiiIcon';
4 | import { styled } from '@material-ui/core/styles';
5 | import { Grid, Typography, NoSsr } from '@material-ui/core';
6 |
7 | const CenteredGrid = styled(Grid)({
8 | position: 'relative',
9 | top: '15vh',
10 | });
11 |
12 | const KawaiiIconWithMargin = styled(KawaiiIcon)({
13 | marginBottom: 65,
14 | });
15 |
16 | class Error extends React.Component<{ statusCode: number }> {
17 | static getInitialProps({ res, err }: any) {
18 | const statusCode = res ? res.statusCode : err ? err.statusCode : null;
19 | return { statusCode };
20 | }
21 |
22 | render() {
23 | const { statusCode } = this.props;
24 |
25 | return (
26 |
27 |
28 |
29 | 0.33 ? 'sad' : 'shocked'} />
30 |
31 |
32 |
33 | Error {statusCode}
34 |
35 |
36 |
37 |
38 | );
39 | }
40 | }
41 |
42 | export default Error;
43 |
--------------------------------------------------------------------------------
/docs/pages/demo/datepicker/BasicDatePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DatePicker } from '@material-ui/pickers';
4 |
5 | export default function BasicDatePicker() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 | setValue(newValue)}
13 | renderInput={(props) => }
14 | />
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/demo/datepicker/CustomInput.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { styled } from '@material-ui/core/styles';
3 | import { DesktopDatePicker } from '@material-ui/pickers';
4 |
5 | const InputContainer = styled('div')({
6 | display: 'flex',
7 | alignItems: 'center',
8 | });
9 |
10 | export default function CustomInput() {
11 | const [value, setValue] = React.useState(new Date());
12 |
13 | return (
14 | setValue(newValue)}
18 | renderInput={({ inputRef, inputProps, InputProps }) => (
19 |
20 |
21 | {InputProps?.endAdornment}
22 |
23 | )}
24 | />
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/docs/pages/demo/datepicker/DatePickers.example.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-underscore-dangle */
2 | import React from 'react';
3 | import TextField from '@material-ui/core/TextField';
4 | import { MobileDatePicker, DesktopDatePicker, DatePicker } from '@material-ui/pickers';
5 |
6 | export default function DatePickersVariants(demoProps: any) {
7 | const [value, setValue] = React.useState(new Date());
8 |
9 | return (
10 |
11 | setValue(newValue)}
21 | renderInput={(props) => }
22 | />
23 | setValue(newValue)}
28 | renderInput={(props) => }
29 | />
30 | setValue(newValue)}
37 | renderInput={(props) => }
38 | />
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/docs/pages/demo/datepicker/StaticDatePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import isWeekend from 'date-fns/isWeekend';
3 | import TextField from '@material-ui/core/TextField';
4 | import { StaticDatePicker } from '@material-ui/pickers';
5 | import { makeJSDateObject } from '../../../utils/helpers';
6 |
7 | function disableWeekends(date: Date) {
8 | // TODO: replace with implementation for your date library
9 | return isWeekend(makeJSDateObject(date));
10 | }
11 |
12 | export default function StaticDatePickerExample() {
13 | const [value, setValue] = React.useState(new Date());
14 |
15 | return (
16 |
17 | setValue(newValue)}
22 | renderInput={(props) => }
23 | />
24 | setValue(newValue)}
31 | renderInput={(props) => }
32 | />
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/docs/pages/demo/datepicker/ViewsDatePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DatePicker, MobileDatePicker } from '@material-ui/pickers';
4 |
5 | export default function YearDatePicker() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 |
10 | setValue(newValue)}
15 | renderInput={(props) => }
16 | />
17 | setValue(newValue)}
24 | renderInput={(props) => }
25 | />
26 | setValue(newValue)}
32 | renderInput={(props) => }
33 | />
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DateRangePicker, DateRange, DateRangeDelimiter } from '@material-ui/pickers';
4 |
5 | export default function BasicDateRangePicker() {
6 | const [value, setValue] = React.useState>([null, null]);
7 |
8 | return (
9 | setValue(newValue)}
14 | renderInput={(startProps, endProps) => (
15 |
16 |
17 | to
18 |
19 |
20 | )}
21 | />
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/CalendarsDateRangePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Grid from '@material-ui/core/Grid';
3 | import Typography from '@material-ui/core/Typography';
4 | import TextField from '@material-ui/core/TextField';
5 | import { DateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
6 |
7 | export default function CalendarsDateRangePicker() {
8 | const [value, setValue] = React.useState>([null, null]);
9 |
10 | return (
11 |
12 | 1 calendar
13 | setValue(newValue)}
17 | renderInput={(startProps, endProps) => (
18 |
19 |
20 | to
21 |
22 |
23 | )}
24 | />
25 | 2 calendars
26 | setValue(newValue)}
30 | renderInput={(startProps, endProps) => (
31 |
32 |
33 | to
34 |
35 |
36 | )}
37 | />
38 | 3 calendars
39 | setValue(newValue)}
43 | renderInput={(startProps, endProps) => (
44 |
45 |
46 | to
47 |
48 |
49 | )}
50 | />
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DateRangePicker, DateRange } from '@material-ui/pickers';
3 |
4 | export default function CustomRangeInputs() {
5 | const [selectedDate, handleDateChange] = React.useState>([null, null]);
6 |
7 | return (
8 | handleDateChange(date)}
12 | renderInput={(startProps, endProps) => (
13 |
14 | }
16 | {...startProps.inputProps}
17 | />
18 | } {...endProps.inputProps} />
19 |
20 | )}
21 | />
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/MinMaxDateRangePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import addWeeks from 'date-fns/addWeeks';
3 | import TextField from '@material-ui/core/TextField';
4 | import { Dayjs } from 'dayjs';
5 | import { Moment } from 'moment';
6 | import { DateTime } from 'luxon';
7 | import { DateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
8 | // TODO remove relative import
9 | import { makeJSDateObject } from '../../../utils/helpers';
10 |
11 | function getWeeksAfter(date: Moment | DateTime | Dayjs | Date, amount: number) {
12 | // TODO: replace with implementation for your date library
13 | return date ? addWeeks(makeJSDateObject(date), amount) : undefined;
14 | }
15 |
16 | export default function MinMaxDateRangePicker() {
17 | const [value, setValue] = React.useState>([null, null]);
18 |
19 | return (
20 | setValue(newValue)}
26 | renderInput={(startProps, endProps) => (
27 |
28 |
29 | to
30 |
31 |
32 | )}
33 | />
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/ResponsiveDateRangePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import {
4 | MobileDateRangePicker,
5 | DateRangeDelimiter,
6 | DesktopDateRangePicker,
7 | DateRange,
8 | } from '@material-ui/pickers';
9 |
10 | export default function ResponsiveDateRangePicker() {
11 | const [value, setValue] = React.useState>([null, null]);
12 |
13 | return (
14 |
15 | setValue(newValue)}
19 | renderInput={(startProps, endProps) => (
20 |
21 |
22 | to
23 |
24 |
25 | )}
26 | />
27 | setValue(newValue)}
31 | renderInput={(startProps, endProps) => (
32 |
33 |
34 | to
35 |
36 |
37 | )}
38 | />
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/docs/pages/demo/daterangepicker/StaticDateRangePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { StaticDateRangePicker, DateRangeDelimiter, DateRange } from '@material-ui/pickers';
4 |
5 | export default function StaticDateRangePickerExample() {
6 | const [value, setValue] = React.useState>([null, null]);
7 |
8 | return (
9 |
10 | setValue(newValue)}
14 | renderInput={(startProps, endProps) => (
15 |
16 |
17 | to
18 |
19 |
20 | )}
21 | />
22 | setValue(newValue)}
26 | renderInput={(startProps, endProps) => (
27 |
28 |
29 | to
30 |
31 |
32 | )}
33 | />
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/docs/pages/demo/datetime-picker/BasicDateTimePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DateTimePicker } from '@material-ui/pickers';
4 |
5 | export default function BasicDateTimePicker() {
6 | const [selectedDate, handleDateChange] = React.useState(new Date());
7 |
8 | return (
9 |
10 | }
12 | label="DateTimePicker"
13 | value={selectedDate}
14 | onChange={handleDateChange}
15 | />
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-underscore-dangle, no-console */
2 | import * as React from 'react';
3 | import AlarmIcon from '@material-ui/icons/Alarm';
4 | import SnoozeIcon from '@material-ui/icons/Snooze';
5 | import TextField from '@material-ui/core/TextField';
6 | import ClockIcon from '@material-ui/icons/AccessTime';
7 | import { DateTimePicker, MobileDateTimePicker } from '@material-ui/pickers';
8 |
9 | export default function CustomDateTimePicker(demoProps: any) {
10 | const [clearedDate, setClearedDate] = React.useState(null);
11 | const [value, setValue] = React.useState(new Date('2019-01-01T18:54'));
12 |
13 | return (
14 |
15 | setValue(newValue)}
23 | minDate={new Date('2018-01-01')}
24 | leftArrowIcon={}
25 | rightArrowIcon={}
26 | leftArrowButtonText="Open previous month"
27 | rightArrowButtonText="Open next month"
28 | openPickerIcon={}
29 | minTime={new Date(0, 0, 0, 9)}
30 | maxTime={new Date(0, 0, 0, 20)}
31 | renderInput={(props) => (
32 |
33 | )}
34 | />
35 | setValue(newValue)}
38 | label="With error handler"
39 | onError={console.log}
40 | minDate={new Date('2018-01-01T00:00')}
41 | inputFormat={demoProps.__willBeReplacedGetFormatString({
42 | moment: 'YYYY/MM/DD hh:mm A',
43 | dateFns: 'yyyy/MM/dd hh:mm a',
44 | })}
45 | mask="___/__/__ __:__ _M"
46 | renderInput={(props) => }
47 | />
48 | setClearedDate(newValue)}
52 | renderInput={(props) => }
53 | />
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/docs/pages/demo/datetime-picker/DateTimePickers.example.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-underscore-dangle, no-console */
2 | import * as React from 'react';
3 | import TextField from '@material-ui/core/TextField';
4 | import { MobileDateTimePicker, DesktopDateTimePicker, DateTimePicker } from '@material-ui/pickers';
5 |
6 | export default function DateTimePickerDemo(demoProps: any) {
7 | const [value, setValue] = React.useState(new Date('2018-01-01T00:00:00.000Z'));
8 |
9 | return (
10 |
11 | setValue(newValue)}
15 | label="24h clock"
16 | renderInput={(props) => }
17 | />
18 | setValue(newValue)}
24 | renderInput={(props) => }
25 | />
26 | }
28 | ampm={false}
29 | disablePast
30 | value={value}
31 | onChange={(newValue) => setValue(newValue)}
32 | onError={console.log}
33 | disableMaskedInput
34 | inputFormat={demoProps.__willBeReplacedGetFormatString({
35 | moment: 'YYYY/MM/DD HH:mm',
36 | dateFns: 'yyyy/MM/dd HH:mm',
37 | })}
38 | />
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/docs/pages/demo/datetime-picker/DateTimeValidation.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DateTimePicker } from '@material-ui/pickers';
4 |
5 | export default function DateTimePickerValidation() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 |
10 | }
12 | label="Ignore date and time"
13 | value={value}
14 | onChange={(newValue) => setValue(newValue)}
15 | minDateTime={new Date()}
16 | />
17 | }
19 | label="Ignore time in each day"
20 | value={value}
21 | onChange={(newValue) => setValue(newValue)}
22 | minDate={new Date('2020-02-14')}
23 | minTime={new Date(0, 0, 0, 8)}
24 | maxTime={new Date(0, 0, 0, 18, 45)}
25 | />
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/docs/pages/demo/datetime-picker/index.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import Example from '_shared/Example';
3 | import PageMeta from '_shared/PageMeta';
4 | import LinkedComponents from '_shared/LinkedComponents';
5 |
6 | import * as BasicDateTimePicker from './BasicDateTimePicker.example';
7 | import * as DateTimePickers from './DateTimePickers.example';
8 | import * as CustomDateTimePicker from './CustomDateTimePicker.example';
9 | import * as DateTimeValidation from './DateTimeValidation.example';
10 |
11 |
12 |
13 | ## Date & Time picker
14 |
15 | This component combines date & time pickers. It allows to select both date and time with the same control.
16 |
17 | **Note:** This component is not listed in [material design guidelines](https://material.io/components/)
18 |
19 |
20 |
21 | #### Basic usage
22 |
23 | Allows choosing date then time. There are too many views, so tabs are required to visually distinguish date/time steps.
24 |
25 |
26 |
27 | #### Responsiveness
28 |
29 | The date time picker component is designed and optimized for the device it runs on.
30 |
31 | - The "Mobile" version works best for touch devices and small screens.
32 | - The "Desktop" version works best for mouse devices and large screens.
33 |
34 | By default, the `DateTimePicker` component uses a `@media (pointer: fine)` media query to determine which version to use.
35 | This can be customized by `desktopModeMediaQuery` prop.
36 |
37 |
38 |
39 | #### Date & Time validation
40 |
41 | It is possible to restrict date and time selection in two ways:
42 |
43 | - using `minDateTime`/`maxDateTime`, you can restrict time selection before or after a particular moment in time
44 | - using `minTime`/`maxTime`, you can disable selecting times before or after a certain time each day respectively
45 |
46 |
47 |
48 | #### Customization
49 |
50 | Here are some examples of heavily customized date & time pickers
51 |
52 |
53 |
54 | #### API
55 |
56 |
57 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/BasicTimePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { TimePicker } from '@material-ui/pickers';
4 |
5 | export default function BasicTimePicker() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 |
10 | }
12 | label="12 hours"
13 | value={value}
14 | onChange={(newValue) => setValue(newValue)}
15 | />
16 | }
18 | ampm={false} // This is not needed if you are using localization
19 | label="24 hours"
20 | value={value}
21 | onChange={(newValue) => setValue(newValue)}
22 | />
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/SecondsTimePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { TimePicker } from '@material-ui/pickers';
4 |
5 | export default function SecondsTimePicker() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 |
10 | }
12 | ampm={false}
13 | openTo="hours"
14 | views={['hours', 'minutes', 'seconds']}
15 | inputFormat="HH:mm:ss"
16 | mask="__:__:__"
17 | label="With seconds"
18 | value={value}
19 | onChange={(newValue) => setValue(newValue)}
20 | />
21 | }
23 | ampmInClock
24 | openTo="minutes"
25 | views={['minutes', 'seconds']}
26 | inputFormat="mm:ss"
27 | mask="__:__"
28 | label="Minutes and seconds"
29 | value={value}
30 | onChange={(newValue) => setValue(newValue)}
31 | />
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/StaticTimePicker.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { StaticTimePicker } from '@material-ui/pickers';
4 |
5 | export default function StaticTimePickerExample() {
6 | const [value, setValue] = React.useState(new Date());
7 |
8 | return (
9 |
10 | setValue(newValue)}
14 | renderInput={(props) => }
15 | />
16 | setValue(newValue)}
22 | renderInput={(props) => }
23 | />
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/TimePickers.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { TimePicker, MobileTimePicker, DesktopTimePicker } from '@material-ui/pickers';
4 |
5 | export default function TimePickers() {
6 | const [value, setValue] = React.useState(new Date('2018-01-01T00:00:00.000Z'));
7 |
8 | return (
9 |
10 | setValue(newValue)}
15 | renderInput={(props) => }
16 | />
17 | setValue(newValue)}
23 | renderInput={(props) => }
24 | />
25 | {/* Alternative way to show am/pm */}
26 | }
36 | />
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/TimeValidation.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { TimePicker } from '@material-ui/pickers';
4 |
5 | export default function TimeValidation() {
6 | const [value, setValue] = React.useState(new Date('2020-01-01 12:00'));
7 |
8 | return (
9 |
10 | }
12 | value={value}
13 | onChange={(newValue) => setValue(newValue)}
14 | minTime={new Date(0, 0, 0, 8)}
15 | maxTime={new Date(0, 0, 0, 18, 45)}
16 | />
17 | }
19 | ampm={false}
20 | label="24 hours"
21 | minTime={new Date(0, 0, 0, 8)}
22 | maxTime={new Date(0, 0, 0, 18, 45)}
23 | value={value}
24 | onChange={(newValue) => setValue(newValue)}
25 | />
26 | }
28 | ampm={false}
29 | label="Disable odd hours"
30 | value={value}
31 | onChange={(newValue) => setValue(newValue)}
32 | shouldDisableTime={(timeValue, clockType) => {
33 | if (clockType === 'hours' && timeValue % 2) {
34 | return true;
35 | }
36 |
37 | return false;
38 | }}
39 | />
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/docs/pages/demo/timepicker/index.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import Example from '_shared/Example';
3 | import PageMeta from '_shared/PageMeta';
4 | import LinkedComponents from '_shared/LinkedComponents';
5 | import { Hidden } from '@material-ui/core';
6 |
7 | import * as TimeValidation from './TimeValidation.example';
8 | import * as BasicTimePicker from './BasicTimePicker.example';
9 | import * as TimePickers from './TimePickers.example';
10 | import * as StaticTimePicker from './StaticTimePicker.example';
11 | import * as SecondsTimePicker from './SecondsTimePicker.example';
12 |
13 |
14 |
15 | ## Time Picker
16 |
17 | Time pickers let user select a single time (in the hours:minutes format).
18 | The selected time is indicated by the filled circle at the end of the clock hand.
19 |
20 |
21 |
22 | #### Basic usage
23 |
24 | A time picker should adjust to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.
25 |
26 |
27 |
28 | #### Responsiveness
29 |
30 | The time picker component is designed and optimized for the device it runs on.
31 |
32 | - The "Mobile" version works best for touch devices and small screens.
33 | - The "Desktop" version works best for mouse devices and large screens.
34 |
35 | By default, the `TimePicker` component uses a `@media (pointer: fine)` media query to determine which version to use.
36 | This can be customized by `desktopModeMediaQuery` prop.
37 |
38 |
39 |
40 | #### Time Validation
41 |
42 |
43 |
44 | #### Static mode
45 |
46 | It is possible to render any picker inline. This will be really helpful to build custom popover/modal containers.
47 | For that use `variant="static"`.
48 |
49 |
50 |
51 |
52 |
53 | #### Seconds
54 |
55 | Seconds input can be used for selection of a precise time point.
56 |
57 |
58 |
59 | #### API
60 |
61 |
62 |
--------------------------------------------------------------------------------
/docs/pages/getting-started/installation.mdx:
--------------------------------------------------------------------------------
1 | import PageMeta from '../../_shared/PageMeta';
2 |
3 |
7 |
8 | ## Installation
9 |
10 | Material UI Pickers is available as an [npm package](https://www.npmjs.com/package/@material-ui/pickers):
11 |
12 | ```
13 | npm i @material-ui/pickers
14 |
15 | yarn add @material-ui/pickers
16 | ```
17 |
18 | #### Peer Library
19 |
20 | `@material-ui/pickers` was designed to use the date management library of your choice.
21 | We are providing interfaces for [date-fns 2](https://date-fns.org/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs) and [moment](https://momentjs.com/).
22 |
23 | ```
24 | npm i date-fns
25 | // or
26 | npm i moment
27 | // or
28 | npm i luxon
29 | // or
30 | npm i dayjs
31 | ```
32 |
33 | Tell pickers which date management library it should use with `LocalizationProvider`. This component takes a `dateAdapter`
34 | prop, and makes it available down the React tree thanks to [React Context](https://reactjs.org/docs/context.html). It should
35 | be used at the root of your component tree, or at the highest level you wish the pickers to be available.
36 |
37 | ```jsx
38 | import { LocalizationProvider } from '@material-ui/pickers';
39 |
40 | // pick an adapter for your date library
41 | import MomentUtils from '@material-ui/pickers/adapter/moment';
42 | import DateFnsUtils from '@material-ui/pickers/adapter/date-fns';
43 | import LuxonUtils from '@material-ui/pickers/adapter/luxon';
44 |
45 | function App() {
46 | return (
47 |
48 |
49 |
50 | );
51 | }
52 |
53 | ReactDOM.render(, document.querySelector('#app'));
54 | ```
55 |
56 | It is also possible to pass the [date adapter directly to the picker](/guides/date-adapter-passing) and avoid using context,
57 | but please use this possibility wisely.
58 |
--------------------------------------------------------------------------------
/docs/pages/getting-started/parsing.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import PageMeta from '_shared/PageMeta';
3 |
4 |
5 |
6 | ## Parsing dates
7 |
8 | Material UI Pickers relies on the date management library when the date should be parsed. Any other prop-types that accepts dates (e.g. `minDate`, `maxDate`) it can take string, number, Date object and so on.
9 |
10 |
11 |
12 | Find more information about parsing dates in the documentation for your library:
13 |
14 | - [date-fns](https://date-fns.org/v2.19.0/docs/parse)
15 | - [dayjs](https://day.js.org/docs/en/parse/parse)
16 | - [luxon](https://moment.github.io/luxon/docs/manual/parsing.html)
17 | - [moment](https://momentjs.com/docs/#/parsing/)
18 |
19 | P.S.: Pass any value to the picker, and if it won't be parsed as expected feel free to open an issue
20 | on [GitHub](https://github.com/mui-org/material-ui-pickers) 😎
21 |
--------------------------------------------------------------------------------
/docs/pages/getting-started/usage.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import PageMeta from '_shared/PageMeta';
3 | import { NoSsr } from '@material-ui/core';
4 | import { CODESANDBOX_EXAMPLE_ID } from '_constants';
5 |
6 |
7 |
8 | ## Usage
9 |
10 | @material-ui/pickers relies only on material-ui controls and the date management library of your choice. Please note that all components are controlled, meaning that it's required to pass the `value` and `onChange` props.
11 |
12 |
13 |
14 | #### Quick start
15 |
16 | **Note** `onChange` has a second parameter. So if you will not do `onChange={date => handleDateChange(date)}` you will get the console warning that [useState hook does not accept a second callback argument.](https://github.com/facebook/react/issues/14174)
17 |
18 | ```jsx
19 | import * as React from 'react';
20 | import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns'; // choose your lib
21 | import { DatePicker, TimePicker, DateTimePicker, LocalizationProvider } from '@material-ui/pickers';
22 |
23 | function App() {
24 | const [selectedDate, handleDateChange] = React.useState(new Date());
25 |
26 | return (
27 |
28 | }
30 | value={selectedDate}
31 | onChange={(date) => handleDateChange(date)}
32 | />
33 | }
35 | value={selectedDate}
36 | onChange={(date) => handleDateChange(date)}
37 | />
38 | }
40 | value={selectedDate}
41 | onChange={(date) => handleDateChange(date)}
42 | />
43 |
44 | );
45 | }
46 | ```
47 |
48 |
49 |
61 |
62 |
--------------------------------------------------------------------------------
/docs/pages/guides/Accessibility.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DatePicker } from '@material-ui/pickers';
4 |
5 | export default function BasicDatePicker() {
6 | const [selectedDate, handleDateChange] = React.useState(new Date());
7 |
8 | return (
9 | handleDateChange(date)}
13 | renderInput={(props) => }
14 | />
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/guides/ControllingProgrammatically.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import TextField from '@material-ui/core/TextField';
4 | import { makeStyles } from '@material-ui/core/styles';
5 | import { DatePicker } from '@material-ui/pickers';
6 |
7 | const useStyles = makeStyles({
8 | root: {
9 | display: 'flex',
10 | flexDirection: 'column',
11 | },
12 | });
13 |
14 | export default function ControllingProgrammaticallyExample() {
15 | const classes = useStyles();
16 | const [open, setOpen] = React.useState(false);
17 | const [value, setValue] = React.useState(new Date('2018-01-01T00:00:00.000Z'));
18 |
19 | return (
20 |
21 |
22 | }
24 | open={open}
25 | onOpen={() => setOpen(true)}
26 | onClose={() => setOpen(false)}
27 | label="Open me from button"
28 | inputFormat="d MMM yyyy"
29 | value={value}
30 | onChange={(newValue) => setValue(newValue)}
31 | />
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/docs/pages/guides/CssOverrides.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import isWeekend from 'date-fns/isWeekend';
3 | import TextField from '@material-ui/core/TextField';
4 | import { lightBlue } from '@material-ui/core/colors';
5 | import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
6 | import { DatePicker } from '@material-ui/pickers';
7 |
8 | const materialTheme = createMuiTheme({
9 | overrides: {
10 | MuiPickersToolbar: {
11 | root: {
12 | backgroundColor: lightBlue.A200,
13 | },
14 | },
15 | MuiPickersCalendarHeader: {
16 | root: {
17 | // backgroundColor: lightBlue.A200,
18 | // color: 'white',
19 | },
20 | },
21 | MuiPickersDay: {
22 | root: {
23 | color: lightBlue.A700,
24 | '&$disabled': {
25 | color: lightBlue['100'],
26 | },
27 | '&$selected': {
28 | backgroundColor: lightBlue['400'],
29 | },
30 | },
31 | today: {
32 | color: lightBlue['900'],
33 | },
34 | },
35 | MuiPickersModalDialog: {
36 | dialogAction: {
37 | color: lightBlue['400'],
38 | },
39 | },
40 | },
41 | });
42 |
43 | export default function CssOverrides() {
44 | const [selectedDate, handleDateChange] = React.useState(new Date());
45 |
46 | return (
47 |
48 | handleDateChange(date)}
52 | renderInput={(props) => }
53 | // @ts-ignore
54 | shouldDisableDate={isWeekend}
55 | />
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/docs/pages/guides/CssTheme.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { lime } from '@material-ui/core/colors';
4 | import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
5 | import { DateTimePicker } from '@material-ui/pickers';
6 |
7 | const defaultMaterialTheme = createMuiTheme({
8 | palette: {
9 | primary: lime,
10 | },
11 | });
12 |
13 | export default function CssThemeExample() {
14 | const [value, setValue] = React.useState(new Date());
15 |
16 | return (
17 |
18 | }
20 | label="Lime DateTimePicker"
21 | value={value}
22 | onChange={(newValue) => setValue(newValue)}
23 | />
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/docs/pages/guides/CssThemeSpacing.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { DateTimePicker } from '@material-ui/pickers';
4 | import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
5 |
6 | const muiTheme = createMuiTheme({
7 | spacing: 2,
8 | });
9 |
10 | export default function CssThemeExample() {
11 | const [selectedDate, handleDateChange] = React.useState();
12 |
13 | return (
14 |
15 | }
17 | label="2px spacing"
18 | value={selectedDate}
19 | onChange={(date) => handleDateChange(date)}
20 | />
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/docs/pages/guides/DateAdapterProp.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import ruLocale from 'date-fns/locale/ru';
3 | import deLocale from 'date-fns/locale/de';
4 | import TextField from '@material-ui/core/TextField';
5 | import { DatePicker } from '@material-ui/pickers';
6 | import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
7 |
8 | const staticDateAdapter = new DateFnsAdapter({ locale: ruLocale });
9 |
10 | export default function UsingDateAdapterProp() {
11 | const [locale] = React.useState(deLocale);
12 | const [value, setValue] = React.useState(new Date());
13 |
14 | const memoizedDateAdapter = React.useMemo(() => {
15 | return new DateFnsAdapter({ locale });
16 | }, [locale]);
17 |
18 | return (
19 |
20 | }
22 | value={value}
23 | onChange={(newValue) => setValue(newValue)}
24 | dateAdapter={staticDateAdapter}
25 | />
26 | setValue(newValue)}
29 | dateAdapter={memoizedDateAdapter}
30 | renderInput={(props) => (
31 |
32 | )}
33 | />
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/docs/pages/guides/Formats.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import frLocale from 'date-fns/locale/fr';
3 | import TextField from '@material-ui/core/TextField';
4 | import { DatePicker, LocalizationProvider } from '@material-ui/pickers';
5 | import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
6 |
7 | const formats = {
8 | normalDate: 'd MMM yyy',
9 | keyboardDate: 'd MMM yyy',
10 | };
11 |
12 | export default function DateFnsLocalizationExample() {
13 | const [value, setValue] = React.useState(new Date());
14 |
15 | return (
16 |
17 | setValue(newValue)}
21 | clearText="vider"
22 | cancelText="annuler"
23 | renderInput={(props) => }
24 | />
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/docs/pages/guides/FormikValidationSchema.example.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | // @ts-nocheck
3 | import React from 'react';
4 | import Grid from '@material-ui/core/Grid';
5 | import TextField from '@material-ui/core/TextField';
6 | import { date, object } from 'yup';
7 | import { Formik, Form, Field, FieldProps } from 'formik';
8 | import { DatePicker, BaseDatePickerProps } from '@material-ui/pickers';
9 |
10 | interface DatePickerFieldProps extends FieldProps, BaseDatePickerProps {
11 | getShouldDisableDateError: (date: Date) => string;
12 | }
13 |
14 | function DatePickerField(props: DatePickerFieldProps) {
15 | const {
16 | field,
17 | form,
18 | getShouldDisableDateError,
19 | maxDate = new Date('2099-12-31'),
20 | minDate = new Date('1900-01-01'),
21 | ...other
22 | } = props;
23 | const currentError = form.errors[field.name];
24 |
25 | return (
26 | form.setFieldValue(field.name, newValue, true)}
33 | renderInput={(inputProps) => (
34 | form.setFieldTouched(field.name, true, true)}
41 | />
42 | )}
43 | {...other}
44 | />
45 | );
46 | }
47 |
48 | const schema = object({
49 | date: date().required().min(new Date()).max(new Date('2100-10-10')),
50 | });
51 |
52 | export default function FormikValidationSchemaExample() {
53 | return (
54 |
55 | {({ values, errors }) => (
56 |
68 | )}
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/docs/pages/guides/OverrideLogic.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TextField from '@material-ui/core/TextField';
3 | import { LocalizationProvider, DatePicker } from '@material-ui/pickers';
4 | import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
5 |
6 | class OverriddenAdapter extends DateFnsAdapter {
7 | getYearRange(start: Date, end: Date) {
8 | return super.getYearRange(start, end).reverse();
9 | }
10 | }
11 |
12 | export default function OverrideLogicExample() {
13 | const [value, setValue] = React.useState(new Date());
14 |
15 | return (
16 |
17 | setValue(newValue)}
21 | renderInput={(props) => }
22 | />
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/docs/pages/guides/StaticComponents.example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Paper, Button } from '@material-ui/core';
3 | import { PickersClockView, PickersCalendarView } from '@material-ui/pickers';
4 |
5 | export default function StaticPickers() {
6 | const [date, handleDateChange] = React.useState(new Date());
7 | const [calendarView, setCalendarView] = React.useState<'date' | 'year'>('date');
8 |
9 | return (
10 |
11 |
12 |
13 |
21 |
22 |
25 |
32 |
33 | #### Hijri calendar system
34 |
35 | Install `@date-io/hijri` and `moment-hijri` packages from npm.
36 |
37 | ```
38 | npm install @date-io/hijri moment-hijri
39 | ```
40 |
41 | To use it with Arabic locale, make sure to import `moment/locale/ar-sa`
42 |
43 | ```javascript
44 | import 'moment/locale/ar-sa';
45 | ```
46 |
47 | By default, the `DatePicker` uses `1900-01-01` for minDate and `2099-31-12` for maxDate.
48 | `moment-hijri` only supports dates from `1356-01-01` H (1937-03-14) to `1499-12-29` H (2076-11-26)
49 | so you will need to set `minDate` and `maxDate` on your `DatePicker` component otherwise your component will not work properly.
50 |
51 | ```jsx
52 |
57 | ```
58 |
59 | #### Example
60 |
61 | You can use the examples below. It is recommended that you change the font.
62 |
63 |
64 |
--------------------------------------------------------------------------------
/docs/pages/localization/date-fns.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import Example from '_shared/Example';
3 | import PageMeta from '_shared/PageMeta';
4 | import * as DateFnsExample from './Date-fns.example';
5 |
6 |
7 |
8 | ## Localization with date-fns
9 |
10 | When using date-fns, localization is performed by passing a locale object to the `LocalizationProvider` component.
11 |
12 |
13 |
14 | #### Basic example
15 |
16 | _Note_: Any picker in the component tree will be re-rendered automatically on locale change.
17 |
18 |
19 |
--------------------------------------------------------------------------------
/docs/pages/localization/moment.mdx:
--------------------------------------------------------------------------------
1 | import Ad from '_shared/Ad';
2 | import Example from '_shared/Example';
3 | import PageMeta from '_shared/PageMeta';
4 | import * as MomentExample from './Moment.example';
5 |
6 |
7 |
8 | ## Localization with moment
9 |
10 | Moment localization is relying on the global moment object used.
11 |
12 |
13 |
14 | It is also possible to pass a configured global moment with selected locale, default timezone, etc.
15 | Pass the selected locale as a string to the provider to make pickers rerender automatically on
16 | locale change.
17 |
18 | #### Example
19 |
20 | _Note_: Any picker in the component tree will be rerendered automatically on locale change
21 |
22 |
23 |
--------------------------------------------------------------------------------
/docs/pages/regression/RegressionDay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IUtils } from '@date-io/core/IUtils';
3 | import { PickersDay, PickersDayProps } from '@material-ui/pickers';
4 |
5 | export const createRegressionDay = (utils: IUtils) => (
6 | day: any,
7 | selectedDate: any,
8 | dayProps: PickersDayProps
9 | ) => {
10 | return ;
11 | };
12 |
--------------------------------------------------------------------------------
/docs/pages/regression/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Regression';
2 |
--------------------------------------------------------------------------------
/docs/scripts/assign-production-domains.js:
--------------------------------------------------------------------------------
1 | const { execSync } = require('child_process');
2 | const { version } = require('../../lib/package.json');
3 |
4 | // dev.material-ui-pickers.dev is the automatically deployed for the `next` branch
5 |
6 | execSync('now alias dev.material-ui-pickers.dev next.material-ui-pickers.dev');
7 | execSync(
8 | `now alias dev.material-ui-pickers.dev v${version.replace(/\./g, '-')}.material-ui-pickers.dev`
9 | );
10 |
--------------------------------------------------------------------------------
/docs/scripts/generate-backers.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | require('dotenv').config();
3 |
4 | const fse = require('fs-extra');
5 | const path = require('path');
6 | const { patreon: patreonApi } = require('patreon');
7 |
8 | function processPatreonPledges(rawJson) {
9 | return (
10 | rawJson.data
11 | // sort by pledge amount
12 | .sort((a, b) => a.attributes.amount_cents - b.attributes.amount_cents)
13 | .reverse()
14 | .map(({ relationships }) => {
15 | const patronId = relationships.patron.data.id;
16 | const user = rawJson.included.find((entity) => entity.id === patronId);
17 |
18 | return user.attributes;
19 | })
20 | );
21 | }
22 |
23 | async function main() {
24 | if (!process.argv[2]) {
25 | throw new Error(
26 | `Please provide creator access token as argument.\n
27 | Find creator access token at https://www.patreon.com/portal/registration/register-clients\n
28 | Then pass token like: yarn generate-backers {your token here}`
29 | );
30 | }
31 |
32 | const patreonAPIClient = patreonApi(process.argv[2]);
33 | const { rawJson } = await patreonAPIClient('/campaigns/1559688/pledges');
34 | const processedPatreonResponse = processPatreonPledges(rawJson);
35 |
36 | await fse.writeFile(
37 | path.resolve(__dirname, '..', 'patrons.json'),
38 | JSON.stringify(processedPatreonResponse)
39 | );
40 | }
41 |
42 | main().catch(console.error);
43 |
--------------------------------------------------------------------------------
/docs/static/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-144x144.png
--------------------------------------------------------------------------------
/docs/static/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-192x192.png
--------------------------------------------------------------------------------
/docs/static/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-36x36.png
--------------------------------------------------------------------------------
/docs/static/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-48x48.png
--------------------------------------------------------------------------------
/docs/static/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-72x72.png
--------------------------------------------------------------------------------
/docs/static/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/android-icon-96x96.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-114x114.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-120x120.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-144x144.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-152x152.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-180x180.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-57x57.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-60x60.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-72x72.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-76x76.png
--------------------------------------------------------------------------------
/docs/static/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon-precomposed.png
--------------------------------------------------------------------------------
/docs/static/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/apple-icon.png
--------------------------------------------------------------------------------
/docs/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/favicon-16x16.png
--------------------------------------------------------------------------------
/docs/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/favicon-32x32.png
--------------------------------------------------------------------------------
/docs/static/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/favicon-96x96.png
--------------------------------------------------------------------------------
/docs/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/favicon.ico
--------------------------------------------------------------------------------
/docs/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Material ui pickers",
3 | "name": "Material ui pickers docs",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "theme_color": "#3da044",
12 | "background_color": "#ffffff"
13 | }
14 |
--------------------------------------------------------------------------------
/docs/static/meta-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/meta-image.png
--------------------------------------------------------------------------------
/docs/static/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/ms-icon-144x144.png
--------------------------------------------------------------------------------
/docs/static/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/ms-icon-150x150.png
--------------------------------------------------------------------------------
/docs/static/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/ms-icon-310x310.png
--------------------------------------------------------------------------------
/docs/static/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mui/material-ui-pickers/e30c5c3ec5cce5a3d42cfec66388bae52427dd3b/docs/static/ms-icon-70x70.png
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "allowSyntheticDefaultImports": true,
5 | "allowUmdGlobalAccess": true,
6 | "baseUrl": ".",
7 | "esModuleInterop": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "jsx": "react",
10 | "lib": ["dom", "es2017"],
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "noEmit": true,
14 | "noImplicitAny": true,
15 | "noUnusedLocals": false,
16 | "noUnusedParameters": false,
17 | "preserveConstEnums": true,
18 | "removeComments": false,
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "sourceMap": true,
22 | "strict": true,
23 | "suppressImplicitAnyIndexErrors": true,
24 | "target": "esnext"
25 | },
26 | "include": ["./**/*.ts*", "./typings.d.ts"]
27 | }
28 |
--------------------------------------------------------------------------------
/docs/typings.d.ts:
--------------------------------------------------------------------------------
1 | import {
2 | MuiPickersComponentsToClassName,
3 | MuiPickersComponentsPropsList,
4 | } from '@material-ui/pickers/src/typings';
5 |
6 | declare module 'moment-jalaali' {
7 | const value: any;
8 | export default value;
9 | }
10 |
11 | declare module '@material-ui/core/styles/overrides' {
12 | export interface ComponentNameToClassKey extends MuiPickersComponentsToClassName {}
13 | }
14 |
15 | declare module '@material-ui/core/styles/props' {
16 | export interface ComponentsPropsList extends MuiPickersComponentsPropsList {}
17 | }
18 |
19 | interface NavigatorClipboard {
20 | clipboard: {
21 | writeText: (value: string) => Promise;
22 | };
23 | }
24 |
25 | interface Navigator extends NavigatorClipboard {}
26 |
27 | declare module '*.mdx' {
28 | const value: React.ComponentType;
29 | export default value;
30 | }
31 |
--------------------------------------------------------------------------------
/docs/utils/NotificationManager.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import { useSnackbar } from 'notistack';
4 | import { makeStyles } from '@material-ui/core/styles';
5 | import notifications from '../notifications.json';
6 |
7 | interface Notification {
8 | id: string;
9 | title: string;
10 | }
11 |
12 | const useStyles = makeStyles({
13 | notificationContainer: {
14 | '& > p': {
15 | margin: 4,
16 | },
17 | },
18 | });
19 |
20 | export function useNotification() {
21 | const styles = useStyles();
22 | const { enqueueSnackbar } = useSnackbar();
23 |
24 | React.useEffect(() => {
25 | // @ts-ignore
26 | if (window.Cypress) {
27 | return; // hide for visual regression and tests
28 | }
29 |
30 | const viewedNotifications: string[] = JSON.parse(
31 | localStorage.getItem('viewedNotifications') || '[]'
32 | );
33 |
34 | const notificationToShow = (notifications as Notification[]).find(
35 | (notification) => !viewedNotifications.some((viewedId) => viewedId === notification.id)
36 | );
37 |
38 | if (notificationToShow) {
39 | enqueueSnackbar(
40 | ,
44 | {
45 | anchorOrigin: {
46 | vertical: 'top',
47 | horizontal: 'center',
48 | },
49 | }
50 | );
51 |
52 | localStorage.setItem(
53 | 'viewedNotifications',
54 | JSON.stringify([...viewedNotifications, notificationToShow.id])
55 | );
56 | }
57 | }, [enqueueSnackbar, styles.notificationContainer]);
58 | }
59 |
60 | export const NotificationManager: React.FC = () => {
61 | useNotification();
62 | return null;
63 | };
64 |
--------------------------------------------------------------------------------
/docs/utils/anchor-autolink.js:
--------------------------------------------------------------------------------
1 | const visit = require('unist-util-visit');
2 |
3 | function inject(node, id) {
4 | delete node.data.hProperties.id;
5 |
6 | const text = node.children[0] && node.children[0].value;
7 | node.data.hChildren = [
8 | {
9 | type: 'element',
10 | tagName: 'a',
11 | properties: { id, className: ['anchor-link'] },
12 | },
13 | {
14 | type: 'text',
15 | value: text,
16 | },
17 | {
18 | type: 'element',
19 | tagName: 'a',
20 | children: [{ type: 'text', value: '#' }],
21 | properties: { href: `#${id}`, className: ['anchor-link-style'] },
22 | },
23 | ];
24 | }
25 |
26 | module.exports = () => (tree) => {
27 | visit(tree, 'heading', (node) => {
28 | const { data } = node;
29 | const id = data && data.hProperties && data.hProperties.id;
30 |
31 | if (id) {
32 | inject(node, id);
33 | }
34 | });
35 | };
36 |
--------------------------------------------------------------------------------
/docs/utils/getPageContext.ts:
--------------------------------------------------------------------------------
1 | import { SheetsRegistry } from 'jss';
2 | import { createGenerateClassName } from '@material-ui/core/styles';
3 |
4 | export interface PageContext {
5 | generateClassName: any;
6 | sheetsManager: Map;
7 | sheetsRegistry: SheetsRegistry;
8 | }
9 |
10 | export default function (): PageContext {
11 | return {
12 | // This is needed in order to deduplicate the injection of CSS in the page.
13 | sheetsManager: new Map(),
14 | // This is needed in order to inject the critical CSS.
15 | sheetsRegistry: new SheetsRegistry(),
16 | // The standard class name generator.
17 | generateClassName: createGenerateClassName(),
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/docs/utils/github-api.ts:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch';
2 |
3 | let cacheRemaining = 0;
4 | const cache = {
5 | tags: null as { name: string }[] | null,
6 | };
7 |
8 | type CacheType = typeof cache;
9 |
10 | export function fetchGithubData(
11 | path: T
12 | ): Promise> {
13 | if (cache[path] && new Date().getTime() < cacheRemaining) {
14 | return Promise.resolve(cache[path] || ([] as any));
15 | }
16 |
17 | return fetch(`https://api.github.com/repos/mui-org/material-ui-pickers/${path}`, {
18 | headers: {
19 | // just a super basic readonly token, that makes api rate limit = 5000/hour
20 | Authorization: 'token 14ef125b9fbcf138ff9042b45f89f8b3c28f510a',
21 | },
22 | })
23 | .then((res) => {
24 | cacheRemaining = Number(res.headers.get('X-RateLimit-Reset')) * 1000;
25 | if (res.status > 400) {
26 | // We cannot update the cache on this step
27 | throw new Error('Could not fetch the data');
28 | }
29 |
30 | return res.json();
31 | })
32 | .then((data: NonNullable) => {
33 | cache[path] = data;
34 | return data;
35 | });
36 | }
37 |
--------------------------------------------------------------------------------
/docs/utils/helpers.ts:
--------------------------------------------------------------------------------
1 | import dayjs, { Dayjs } from 'dayjs';
2 | import moment, { Moment } from 'moment';
3 | import { DateTime } from 'luxon';
4 |
5 | export function stringToTestId(string: string) {
6 | return string.replace(/[&/\\#,+()$~%.'":*?<>{}\s]/g, '');
7 | }
8 |
9 | export function makeJSDateObject(date: Date | Moment | DateTime | Dayjs) {
10 | if (date instanceof dayjs) {
11 | return (date as Dayjs).clone().toDate();
12 | }
13 |
14 | if (moment.isMoment(date)) {
15 | return (date as Moment).clone().toDate();
16 | }
17 |
18 | if (date instanceof DateTime) {
19 | return date.toJSDate();
20 | }
21 |
22 | if (date instanceof Date) {
23 | return new Date(date.getTime());
24 | }
25 |
26 | return date as any; // handle case with invalid input
27 | }
28 |
29 | export function copy(text: string) {
30 | return navigator.clipboard.writeText(text);
31 | }
32 |
33 | export function loadScript(src: string, position: Element) {
34 | const script = document.createElement('script');
35 | script.setAttribute('async', '');
36 | // eslint-disable-next-line no-console
37 | script.onerror = console.log;
38 | script.src = src;
39 | position.appendChild(script);
40 |
41 | return script;
42 | }
43 |
44 | export function getRandomItem(arr: T[]): T {
45 | return arr[Math.floor(Math.random() * arr.length)];
46 | }
47 |
--------------------------------------------------------------------------------
/docs/utils/prism.ts:
--------------------------------------------------------------------------------
1 | import prism from 'prismjs';
2 | import 'prismjs/components/prism-jsx';
3 | import 'prismjs/components/prism-diff';
4 | import 'prismjs/components/prism-typescript';
5 | import { ThemeType } from '../layout/PageWithContext';
6 |
7 | export type AvailableLanguages = 'jsx' | 'typescript' | 'markup' | 'json' | 'diff';
8 | export const prismThemes = {
9 | light: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css',
10 | dark: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css',
11 | };
12 |
13 | export function setPrismTheme(type: ThemeType) {
14 | const newThemeCss = prismThemes[type];
15 | const currentLinkElement = document.querySelector('link[data-prism="true"]');
16 |
17 | if (!currentLinkElement) {
18 | throw new Error('Cannot find prism link');
19 | }
20 |
21 | const newLinkElement = document.createElement('link');
22 | newLinkElement.rel = 'stylesheet';
23 | newLinkElement.dataset.prism = 'true';
24 | newLinkElement.href = newThemeCss;
25 |
26 | document.head.appendChild(newLinkElement);
27 | currentLinkElement.remove();
28 | }
29 |
30 | export function highlight(code: string, language: AvailableLanguages) {
31 | return prism.highlight(code, prism.languages[language], language);
32 | }
33 |
--------------------------------------------------------------------------------
/docs/utils/table-styler.js:
--------------------------------------------------------------------------------
1 | const visit = require('unist-util-visit');
2 |
3 | module.exports = () => (tree) => {
4 | visit(tree, 'table', (node) => {
5 | node.data = { hProperties: { className: ['mui-pickers-markdown-table'] } };
6 | });
7 | };
8 |
--------------------------------------------------------------------------------
/e2e/component/DatePicker.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { mountStaticPicker } from '../test-utils';
3 | import { StaticDatePicker } from '@material-ui/pickers';
4 |
5 | describe('', () => {
6 | it('Renders and show todays date', () => {
7 | mountStaticPicker((defaultProps) => );
8 |
9 | cy.findByTestId('datepicker-toolbar-date').contains('Sat, Oct 7');
10 | });
11 |
12 | it('Switches between months', () => {
13 | mountStaticPicker((defaultProps) => );
14 |
15 | cy.findByTestId('calendar-month-text').contains('October');
16 |
17 | cy.findByTestId('previous-arrow-button').click().click();
18 | cy.findByTestId('next-arrow-button').click().click().click();
19 |
20 | cy.wait(350);
21 |
22 | cy.findByTestId('calendar-month-text').contains('November');
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/e2e/component/DateTimePicker.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DIALOG_WIDTH } from '../../lib/src/constants/dimensions';
3 | import { mountPickerWithState, mountStaticPicker } from '../test-utils';
4 | import { StaticDateTimePicker, MobileDateTimePicker } from '@material-ui/pickers';
5 |
6 | describe('', () => {
7 | it('Renders and show todays date', () => {
8 | mountStaticPicker((defaultProps) => );
9 |
10 | cy.contains('2017');
11 | cy.contains('Oct 7');
12 | cy.contains('07:36');
13 |
14 | cy.percySnapshot('', {
15 | widths: [DIALOG_WIDTH],
16 | });
17 | });
18 |
19 | it('Proper flow for date & time picking', () => {
20 | mountPickerWithState((defaultProps) => (
21 |
22 | ));
23 |
24 | cy.get('input').click();
25 |
26 | // Year
27 | cy.findByText('2015').click();
28 | cy.get('input').should('have.value', '10/07/2015 07:36 PM');
29 |
30 | // Date
31 | cy.findByLabelText('next month').click().click();
32 | cy.findByLabelText('Dec 22, 2015').click();
33 | cy.get('input').should('have.value', '12/22/2015 07:36 PM');
34 |
35 | // Hour
36 | cy.findByRole('menu').trigger('mouseup', { buttons: 1, offsetX: 66, offsetY: 157 });
37 | cy.get('input').should('have.value', '12/22/2015 08:36 PM');
38 |
39 | // Minute
40 | cy.findByRole('menu').trigger('mouseup', {
41 | buttons: 1,
42 | offsetX: 222,
43 | offsetY: 180,
44 | });
45 |
46 | cy.get('input').should('have.value', '12/22/2015 08:20 PM');
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/e2e/integration/App.spec.ts:
--------------------------------------------------------------------------------
1 | import { stringToTestId } from '../../docs/utils/helpers';
2 | import { navItems } from '../../docs/layout/components/navigationMap';
3 |
4 | describe('App navigation', () => {
5 | before(() => {
6 | cy.visit('/getting-started/installation');
7 | });
8 |
9 | navItems.forEach((navItem) => {
10 | context(navItem.title, () => {
11 | beforeEach(() => {
12 | cy.get(`[data-nav=${stringToTestId(navItem.title)}]`).as('nav-group');
13 | cy.get('@nav-group').click();
14 | });
15 |
16 | navItem.children &&
17 | navItem.children.forEach((leafItem: any) => {
18 | it(`Opens ${leafItem.title} page`, () => {
19 | cy.get('@nav-group')
20 | .find(`[data-nav=${stringToTestId(leafItem.title)}]`)
21 | .click();
22 |
23 | cy.url().should('contain', leafItem.as || leafItem.href);
24 | });
25 | });
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/e2e/plugins/index.js:
--------------------------------------------------------------------------------
1 | const wp = require('@cypress/webpack-preprocessor');
2 | const percyHealthCheck = require('@percy/cypress/task');
3 | const babelLibConfig = require('../../lib/babel.config.js');
4 |
5 | module.exports = (on, config) => {
6 | const options = {
7 | webpackOptions: {
8 | mode: 'development',
9 | resolve: {
10 | extensions: ['.ts', '.tsx', '.js', '.json'],
11 | },
12 | module: {
13 | rules: [
14 | {
15 | test: /\.(ts|tsx)?$/,
16 | loader: 'babel-loader',
17 | options: babelLibConfig,
18 | },
19 | ],
20 | },
21 | },
22 | };
23 |
24 | on('file:preprocessor', wp(options));
25 | on('task', percyHealthCheck);
26 |
27 | return config;
28 | };
29 |
--------------------------------------------------------------------------------
/e2e/support/commands.ts:
--------------------------------------------------------------------------------
1 | import '@percy/cypress';
2 | import 'cypress-plugin-tab';
3 | import '@testing-library/cypress/add-commands';
4 |
5 | declare global {
6 | namespace Cypress {
7 | interface Chainable {
8 | toggleTheme: typeof toggleTheme;
9 | }
10 | }
11 | }
12 |
13 | function toggleTheme(options?: Partial) {
14 | cy.get('[data-mui-test=toggle-theme-btn]').click(options);
15 | }
16 |
17 | Cypress.Commands.add('toggleTheme', toggleTheme);
18 |
--------------------------------------------------------------------------------
/e2e/support/index.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | import { configure } from '@testing-library/cypress';
16 |
17 | configure({ testIdAttribute: 'data-mui-test' });
18 |
19 | require('./commands');
20 | require('cypress-react-unit-test/support');
21 |
--------------------------------------------------------------------------------
/e2e/test-utils.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import parse from 'date-fns/parseISO';
3 | import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
4 | import TextField, { TextFieldProps } from '@material-ui/core/TextField';
5 | import { mount } from 'cypress-react-unit-test';
6 | import { DIALOG_WIDTH } from '../lib/src/constants/dimensions';
7 | import { LocalizationProvider, StaticDatePickerProps } from '@material-ui/pickers';
8 |
9 | // Time of the first commit to the pickers ❤️
10 | const momentInTime = parse('2017-10-07T19:36:00.000');
11 | const mockRequiredProps = {
12 | reduceAnimations: true, // speedup tests
13 | value: momentInTime,
14 | onChange: () => {},
15 | renderInput: (props: TextFieldProps) => ,
16 | };
17 |
18 | /* Globally mock time for all component tests */
19 | function mockTime() {
20 | cy.clock(momentInTime.getTime());
21 | }
22 |
23 | export function mountStaticPicker(
24 | createStaticPickerNode: (
25 | props: Pick
26 | ) => React.ReactNode
27 | ) {
28 | document.body.style.margin = '0px';
29 | cy.viewport(DIALOG_WIDTH, 500);
30 |
31 | mockTime();
32 |
33 | mount(
34 |
35 | {createStaticPickerNode(mockRequiredProps)}
36 |
37 | );
38 | }
39 |
40 | export function mountPicker(
41 | createPicker: (
42 | props: Pick
43 | ) => React.ReactNode
44 | ) {
45 | mockTime();
46 |
47 | mount(
48 |
49 | {createPicker(mockRequiredProps)}
50 |
51 | );
52 | }
53 |
54 | export function mountPickerWithState(
55 | createPicker: (
56 | props: Pick
57 | ) => JSX.Element
58 | ) {
59 | function PickerWithState() {
60 | const [value, setDate] = React.useState(momentInTime);
61 |
62 | return createPicker({ ...mockRequiredProps, value, onChange: (date) => setDate(date) });
63 | }
64 |
65 | mountPicker(() => );
66 | }
67 |
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "baseUrl": "../node_modules",
5 | "target": "es2015",
6 | "moduleResolution": "node",
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "resolveJsonModule": true,
10 | "jsx": "react",
11 | "lib": ["es5", "dom"],
12 | "types": [
13 | "cypress",
14 | "@percy/cypress",
15 | "@types/testing-library__cypress",
16 | "@material-ui/core",
17 | "@material-ui/pickers"
18 | ]
19 | },
20 | "include": ["./**/*.ts", "../docs/**/*", "component/**/*.tsx"]
21 | }
22 |
--------------------------------------------------------------------------------
/lib/.size-snapshot.json:
--------------------------------------------------------------------------------
1 | {
2 | "material-ui-pickers.esm.js": {
3 | "bundled": 209224,
4 | "minified": 110237,
5 | "gzipped": 28323,
6 | "treeshaked": {
7 | "rollup": {
8 | "code": 89207,
9 | "import_statements": 2087
10 | },
11 | "webpack": {
12 | "code": 98915
13 | }
14 | }
15 | },
16 | "material-ui-pickers.umd.js": {
17 | "bundled": 322787,
18 | "minified": 124100,
19 | "gzipped": 35010
20 | },
21 | "material-ui-pickers.umd.min.js": {
22 | "bundled": 277744,
23 | "minified": 114262,
24 | "gzipped": 32199
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/lib/adapter/date-fns.ts:
--------------------------------------------------------------------------------
1 | export { default } from '@date-io/date-fns';
2 |
--------------------------------------------------------------------------------
/lib/adapter/dayjs.ts:
--------------------------------------------------------------------------------
1 | export { default } from '@date-io/dayjs';
2 |
--------------------------------------------------------------------------------
/lib/adapter/luxon.ts:
--------------------------------------------------------------------------------
1 | export { default } from '@date-io/luxon';
2 |
--------------------------------------------------------------------------------
/lib/adapter/moment.ts:
--------------------------------------------------------------------------------
1 | export { default } from '@date-io/moment';
2 |
--------------------------------------------------------------------------------
/lib/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | presets: [
5 | '@babel/preset-react',
6 | '@babel/preset-typescript',
7 | ['@babel/preset-env', { modules: false }],
8 | ],
9 | plugins: [
10 | 'optimize-clsx',
11 | ['@babel/plugin-proposal-class-properties', { loose: true }],
12 | // ['@babel/plugin-transform-runtime'],
13 | // for IE 11 support
14 | '@babel/plugin-transform-object-assign',
15 | '@babel/plugin-proposal-optional-chaining',
16 | '@babel/plugin-proposal-nullish-coalescing-operator',
17 | path.resolve(__dirname, './remove-prop-types.js'),
18 | ],
19 | env: {
20 | production: {
21 | plugins: [
22 | '@babel/plugin-transform-react-constant-elements',
23 | ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
24 | ],
25 | },
26 | },
27 | };
28 |
--------------------------------------------------------------------------------
/lib/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | "mountMode": true
3 | }
4 |
--------------------------------------------------------------------------------
/lib/jest.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | setupFilesAfterEnv: ['/src/__tests__/setup.ts'],
5 | testRegex: './src/__tests__/.*\\.test\\.(js|tsx|ts)$',
6 | testURL: 'http://localhost/',
7 | collectCoverage: true,
8 | transform: {
9 | '^.+\\.(ts|tsx)?$': 'ts-jest',
10 | },
11 | modulePathIgnorePatterns: ['/src/__tests__/dist/'],
12 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
13 | coveragePathIgnorePatterns: ['/src/__tests__/'],
14 | globals: {
15 | 'ts-jest': {
16 | tsConfig: path.resolve(__dirname, 'src', '__tests__', 'tsconfig.json'),
17 | },
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/lib/prepare-build-files.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | const path = require('path');
3 | const fse = require('fs-extra');
4 |
5 | function copyReadme() {
6 | return fse
7 | .copyFile(
8 | path.resolve(__dirname, '..', 'README.md'),
9 | path.resolve(__dirname, 'build', 'README.md')
10 | )
11 | .then(() => console.log('> Copied README.md'));
12 | }
13 |
14 | function createAdapterPackageFile(name) {
15 | const packageJson = {
16 | name: `@material-ui/pickers-adapter-${name}`,
17 | module: 'index.js',
18 | main: 'index.cjs.js',
19 | typings: `../${name}.d.ts`,
20 | };
21 |
22 | return fse.writeFile(
23 | path.resolve(__dirname, 'build', 'adapter', name, 'package.json'),
24 | JSON.stringify(packageJson, null, 2)
25 | );
26 | }
27 |
28 | function createAdaptersPackages() {
29 | return Promise.all(
30 | ['luxon', 'date-fns', 'dayjs', 'moment'].map(createAdapterPackageFile)
31 | ).then(() => console.log('> Created package.json files for adapters'));
32 | }
33 |
34 | function createRootPackageFile() {
35 | return fse
36 | .readFile(path.resolve(__dirname, 'package.json'), 'utf8')
37 | .then((data) => JSON.parse(data))
38 | .then((packageData) => {
39 | // cleanup produced package
40 | const {
41 | devDependencies,
42 | jest,
43 | husky,
44 | main,
45 | module,
46 | 'lint-staged': ls,
47 | ...other
48 | } = packageData;
49 |
50 | const newPackage = {
51 | ...other,
52 | private: false,
53 | main: './dist/material-ui-pickers.js',
54 | module: './index.js',
55 | typings: './index.d.ts',
56 | };
57 |
58 | const buildPath = path.resolve(__dirname, 'build', 'package.json');
59 | const data = JSON.stringify(newPackage, null, 2);
60 |
61 | return fse
62 | .writeFile(buildPath, data)
63 | .then(() => console.log(`> Created package.json in ${buildPath}`));
64 | });
65 | }
66 |
67 | createRootPackageFile()
68 | .then(copyReadme)
69 | .then(createAdaptersPackages)
70 | .then(() => console.log('\nFinished build files preparation'))
71 | .catch(console.error);
72 |
--------------------------------------------------------------------------------
/lib/remove-prop-types.js:
--------------------------------------------------------------------------------
1 | const removePropTypes = (api) => {
2 | const { types, template } = api;
3 | const visitedKey = `remove-prop-types-${Date.now()}`;
4 | return {
5 | visitor: {
6 | AssignmentExpression(path) {
7 | if (
8 | types.isMemberExpression(path.node.left) &&
9 | types.isIdentifier(path.node.left.property) &&
10 | path.node.left.property.name === 'propTypes'
11 | ) {
12 | // Prevent infinity loop.
13 | if (path.node[visitedKey]) {
14 | return;
15 | }
16 | path.node[visitedKey] = true;
17 |
18 | const unsafeWrapTemplate = template(
19 | `
20 | if (process.env.NODE_ENV !== "production") {
21 | NODE;
22 | }
23 | `,
24 | { placeholderPattern: /^NODE$/ }
25 | );
26 | path.replaceWith(
27 | unsafeWrapTemplate({
28 | NODE: path.node,
29 | })
30 | );
31 | }
32 | },
33 | },
34 | };
35 | };
36 |
37 | module.exports = removePropTypes;
38 |
--------------------------------------------------------------------------------
/lib/src/CalendarSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import clsx from 'clsx';
3 | import Skeleton from '@material-ui/lab/Skeleton';
4 | import { makeStyles } from '@material-ui/core/styles';
5 | import { DAY_SIZE, DAY_MARGIN } from './constants/dimensions';
6 | import { withDefaultProps } from './_shared/withDefaultProps';
7 | import { useStyles as useCalendarStyles } from './views/Calendar/Calendar';
8 |
9 | export interface CalendarSkeletonProps extends React.HTMLProps {}
10 |
11 | const muiComponentConfig = {
12 | name: 'MuiPickersCalendarSkeleton',
13 | };
14 |
15 | export const useStyles = makeStyles(
16 | {
17 | root: {
18 | alignSelf: 'start',
19 | },
20 | daySkeleton: {
21 | margin: `0 ${DAY_MARGIN}px`,
22 | },
23 | hidden: {
24 | visibility: 'hidden',
25 | },
26 | },
27 | muiComponentConfig
28 | );
29 |
30 | const monthMap = [
31 | [0, 1, 1, 1, 1, 1, 1],
32 | [1, 1, 1, 1, 1, 1, 1],
33 | [1, 1, 1, 1, 1, 1, 1],
34 | [1, 1, 1, 1, 1, 1, 1],
35 | [1, 1, 1, 1, 0, 0, 0],
36 | ];
37 |
38 | export const CalendarSkeleton: React.FC = withDefaultProps(
39 | muiComponentConfig,
40 | (props) => {
41 | const { className, ...other } = props;
42 | const classes = useStyles();
43 | const calendarClasses = useCalendarStyles();
44 |
45 | return (
46 |
47 | {monthMap.map((week, index) => (
48 |
49 | {week.map((day, index2) => (
50 |
59 | ))}
60 |
61 | ))}
62 |
{children}
37 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/lib/src/wrappers/WrapperVariantContext.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { WrapperVariant } from './Wrapper';
3 |
4 | // consider getting rid from wrapper variant
5 | export const WrapperVariantContext = React.createContext(null);
6 |
7 | export const IsStaticVariantContext = React.createContext(false);
8 |
--------------------------------------------------------------------------------
/lib/tsconfig.adapters.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "./adapter",
5 | "outDir": "build/adapter"
6 | },
7 | "include": ["./adapter/**/*.ts*", "./typings.d.ts"]
8 | }
9 |
--------------------------------------------------------------------------------
/lib/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": "src",
4 | "module": "commonjs",
5 | "outDir": "build",
6 | "declaration": true,
7 | "emitDeclarationOnly": true,
8 | "target": "es5",
9 | "lib": ["dom", "es2016"],
10 | "types": ["jest"],
11 | "skipLibCheck": true,
12 | "jsx": "react",
13 | "moduleResolution": "node",
14 | "noImplicitAny": true,
15 | "strict": true,
16 | "allowSyntheticDefaultImports": true,
17 | "forceConsistentCasingInFileNames": true,
18 | "esModuleInterop": true,
19 | "suppressImplicitAnyIndexErrors": true,
20 | "resolveJsonModule": true
21 | },
22 | "include": ["src/**/*.ts*", "./typings.d.ts"],
23 | "exclude": ["./src/__tests__/**/*", "./rollup.config.js", "build", "cypress/**/*.ts*"]
24 | }
25 |
--------------------------------------------------------------------------------
/lib/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@date-io/type' {
2 | export type DateType = unknown;
3 | }
4 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "build": {
4 | "env": {
5 | "IS_NOW": "true"
6 | }
7 | },
8 | "builds": [
9 | { "src": "docs/next.config.js", "use": "@now/next" },
10 | {
11 | "src": "docs/fakeApi/*",
12 | "use": "@now/node"
13 | }
14 | ],
15 | "routes": [
16 | {
17 | "src": "/fakeApi/(.*)$",
18 | "dest": "/docs/fakeApi/$1.ts"
19 | },
20 | { "src": "/api/(?[^/]+)$", "dest": "docs/api/props?component=$name" },
21 | { "src": "/(.*)", "dest": "docs/$1" }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/scripts/deduplicate.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | const { spawn } = require('child_process');
3 | const path = require('path');
4 | const fs = require('fs');
5 | const deduplicate = require('yarn-deduplicate');
6 |
7 | const lockFile = path.resolve(__dirname, '../yarn.lock');
8 | const yarnlock = fs.readFileSync(lockFile, 'utf8');
9 |
10 | const duplicates = deduplicate.listDuplicates(yarnlock);
11 | if (duplicates.length === 0) {
12 | console.log('No duplicated packages found');
13 | process.exit(0);
14 | }
15 |
16 | console.log(
17 | `${duplicates.length} duplicated package(s) found\n${duplicates.map((x) => ` ${x}`).join('\n')}`
18 | );
19 |
20 | if (process.env.CI) {
21 | console.error(
22 | [
23 | `Error: There are currently ${duplicates.length} duplicated package(s).`,
24 | `To deduplicate run "yarn deduplicate"`,
25 | ].join('\n')
26 | );
27 | process.exit(1);
28 | }
29 |
30 | console.log('Deduplicating package(s)');
31 | fs.writeFileSync(lockFile, deduplicate.fixDuplicates(yarnlock));
32 |
33 | const yarn = spawn('yarn', {
34 | shell: true,
35 | stdio: 'inherit',
36 | cwd: path.resolve(__dirname, '..'),
37 | });
38 |
39 | yarn.on('close', (code) => {
40 | process.exit(code);
41 | });
42 |
--------------------------------------------------------------------------------