[docs] Add API documentation for *DatePicker components

docs/pages/api-docs/date-picker.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './date-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/date-picker',
+    false,
+    /date-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/date-picker.json

@@ -0,0 +1,55 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "cancelText": { "type": { "name": "node" } },
+    "className": { "type": { "name": "string" } },
+    "clearable": { "type": { "name": "bool" } },
+    "clearText": { "type": { "name": "node" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "DialogProps": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "okText": { "type": { "name": "node" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "showTodayButton": { "type": { "name": "bool" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "todayText": { "type": { "name": "node" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    }
+  },
+  "name": "DatePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "filename": "/packages/material-ui-lab/src/DatePicker/DatePicker.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/api-docs/desktop-date-picker.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './desktop-date-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/desktop-date-picker',
+    false,
+    /desktop-date-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/desktop-date-picker.json

@@ -0,0 +1,50 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "className": { "type": { "name": "string" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "PopperProps": { "type": { "name": "object" } },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "TransitionComponent": { "type": { "name": "elementType" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    }
+  },
+  "name": "DesktopDatePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "filename": "/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/api-docs/mobile-date-picker.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './mobile-date-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/mobile-date-picker',
+    false,
+    /mobile-date-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/mobile-date-picker.json

@@ -0,0 +1,55 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "cancelText": { "type": { "name": "node" } },
+    "className": { "type": { "name": "string" } },
+    "clearable": { "type": { "name": "bool" } },
+    "clearText": { "type": { "name": "node" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "DialogProps": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "okText": { "type": { "name": "node" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "showTodayButton": { "type": { "name": "bool" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "todayText": { "type": { "name": "node" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    }
+  },
+  "name": "MobileDatePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "filename": "/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/api-docs/static-date-picker.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './static-date-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/static-date-picker',
+    false,
+    /static-date-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/static-date-picker.json

@@ -0,0 +1,51 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "className": { "type": { "name": "string" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "displayStaticWrapperAs": {
+      "type": { "name": "enum", "description": "'desktop'<br>&#124;&nbsp;'mobile'" }
+    },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    }
+  },
+  "name": "StaticDatePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "filename": "/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/src/pagesApi.js

@@ -31,6 +31,8 @@ module.exports = [
   { pathname: '/api-docs/collapse' },
   { pathname: '/api-docs/container' },
   { pathname: '/api-docs/css-baseline' },
+  { pathname: '/api-docs/date-picker' },
+  { pathname: '/api-docs/desktop-date-picker' },
   { pathname: '/api-docs/desktop-time-picker' },
   { pathname: '/api-docs/dialog' },
   { pathname: '/api-docs/dialog-actions' },
@@ -72,6 +74,7 @@ module.exports = [
   { pathname: '/api-docs/menu' },
   { pathname: '/api-docs/menu-item' },
   { pathname: '/api-docs/menu-list' },
+  { pathname: '/api-docs/mobile-date-picker' },
   { pathname: '/api-docs/mobile-stepper' },
   { pathname: '/api-docs/mobile-time-picker' },
   { pathname: '/api-docs/modal' },
@@ -98,6 +101,7 @@ module.exports = [
   { pathname: '/api-docs/speed-dial' },
   { pathname: '/api-docs/speed-dial-action' },
   { pathname: '/api-docs/speed-dial-icon' },
+  { pathname: '/api-docs/static-date-picker' },
   { pathname: '/api-docs/static-time-picker' },
   { pathname: '/api-docs/step' },
   { pathname: '/api-docs/step-button' },

docs/translations/api-docs/date-picker/date-picker-de.json

@@ -0,0 +1,42 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "acceptRegex": "Regular expression to detect "accepted" symbols.",
+    "cancelText": "Cancel text message",
+    "className": "className applied to the root component.",
+    "clearable": "If <code>true</code>, it shows the clear action in the picker dialog.",
+    "clearText": "Clear text message",
+    "dateAdapter": "Allows to pass configured date-io adapter directly. More info <a href=\"https://next.material-ui-pickers.dev/guides/date-adapter-passing\">here</a> <code>jsx dateAdapter={new AdapterDateFns({ locale: ruLocale })} </code>",
+    "DialogProps": "Props applied to the <a href=\"/api/dialog/\"><code>Dialog</code></a> element.",
+    "disableCloseOnSelect": "If <code>true</code> the popup or dialog will immediately close after submitting full date.",
+    "disabled": "If <code>true</code>, the picker and text field are disabled.",
+    "disableMaskedInput": "Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.",
+    "disableOpenPicker": "Do not render open picker button (renders only text field with validation).",
+    "getOpenDialogAriaText": "Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType",
+    "InputAdornmentProps": "Props to pass to keyboard input adornment.",
+    "inputFormat": "Format string.",
+    "mask": "Custom mask. Can be used to override generate from format. (e.g. <strong>/</strong>/<strong>__ __:</strong> or <strong>/</strong>/<strong>__ __:</strong> _M)",
+    "okText": "Ok button text.",
+    "onAccept": "Callback fired when date is accepted @DateIOType.",
+    "onChange": "Callback fired when the value (the selected date) changes. @DateIOType.",
+    "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
+    "onError": "Callback that fired when input value or new <code>value</code> prop validation returns <strong>new</strong> validation error (or value is valid after error). In case of validation error detected <code>reason</code> prop return non-null value and <code>TextField</code> must be displayed in <code>error</code> state. This can be used to render appropriate form error.<br><a href=\"https://next.material-ui-pickers.dev/guides/forms\">Read the guide</a> about form integration and error displaying.",
+    "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
+    "open": "Control the popup or dialog open state.",
+    "OpenPickerButtonProps": "Props to pass to keyboard adornment button.",
+    "openPickerIcon": "Icon displaying for open picker button.",
+    "orientation": "Force rendering in particular orientation.",
+    "readOnly": "Make picker read only.",
+    "renderInput": "The <code>renderInput</code> prop allows you to customize the rendered input. The <code>props</code> argument of this render prop contains props of <a href=\"https://material-ui.com/api/text-field/#textfield-api\">TextField</a> that you need to forward. Pay specific attention to the <code>ref</code> and <code>inputProps</code> keys.",
+    "rifmFormatter": "Custom formatter to be passed into Rifm component.",
+    "showTodayButton": "If <code>true</code>, the today button is displayed. <strong>Note</strong> that <code>showClearButton</code> has a higher priority.",
+    "showToolbar": "If <code>true</code>, show the toolbar even in desktop mode.",
+    "todayText": "Today text message",
+    "ToolbarComponent": "Component that will replace default toolbar renderer.",
+    "toolbarFormat": "Date format, that is displaying in toolbar.",
+    "toolbarPlaceholder": "Mobile picker date value placeholder, displaying if <code>value</code> === <code>null</code>.",
+    "toolbarTitle": "Mobile picker title, displaying in the toolbar.",
+    "value": "The value of the picker."
+  },
+  "classDescriptions": {}
+}