-
- 
- 
- 
-
- 
- 
-
](https://github.com/)
-
-GitHub allows us to host the Git repository.
-
-[
](https://circleci.com/)
-
-CircleCI allows us to run the test suite.
-
-[
](https://www.netlify.com/)
-
-Netlify allows us to distribute the documentation.
-
-[
](https://crowdin.com/)
-
-CrowdIn allows us to translate the documentation.
-
-[
](https://www.browserstack.com/)
-
-BrowserStack allows us to test in real browsers.
-
-[
](https://codecov.io/)
-
-CodeCov allows us to monitor the test coverage.
+Temporary repository to merge the date picker components in main codebase.
diff --git a/docs/next.config.js b/docs/next.config.js
index cc54352f5913df..9e87a4a71ea879 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -71,9 +71,7 @@ module.exports = {
config.externals = [
(context, request, callback) => {
- const hasDependencyOnRepoPackages = ['notistack', '@material-ui/pickers'].includes(
- request,
- );
+ const hasDependencyOnRepoPackages = ['notistack'].includes(request);
if (hasDependencyOnRepoPackages) {
return callback(null);
@@ -108,7 +106,7 @@ module.exports = {
// transpile 3rd party packages with dependencies in this repository
{
test: /\.(js|mjs|jsx)$/,
- include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)pickers)/,
+ include: /node_modules(\/|\\)notistack/,
use: {
loader: 'babel-loader',
options: {
diff --git a/docs/package.json b/docs/package.json
index 7d41fd91ffba4b..4a46abb92774db 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -32,7 +32,6 @@
"@material-ui/docs": "^5.0.0-alpha.1",
"@material-ui/icons": "^5.0.0-alpha.1",
"@material-ui/lab": "^5.0.0-alpha.1",
- "@material-ui/pickers": "^4.0.0-alpha.11",
"@material-ui/styled-engine": "^5.0.0-alpha.1",
"@material-ui/styled-engine-sc": "^5.0.0-alpha.1",
"@material-ui/styles": "^5.0.0-alpha.1",
@@ -69,7 +68,7 @@
"create-emotion-server": "^10.0.27",
"cross-env": "^7.0.0",
"css-mediaquery": "^0.1.2",
- "date-fns": "^2.15.0",
+ "date-fns": "^2.0.0",
"docsearch.js": "^2.6.3",
"doctrine": "^3.0.0",
"emotion-theming": "^10.0.27",
diff --git a/docs/pages/components/date-picker.js b/docs/pages/components/date-picker.js
new file mode 100644
index 00000000000000..a9faa5bc5db5fb
--- /dev/null
+++ b/docs/pages/components/date-picker.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/date-picker';
+const requireDemo = require.context('docs/src/pages/components/date-picker', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+ '!raw-loader!../../src/pages/components/date-picker',
+ false,
+ /\.(js|md|tsx)$/,
+);
+
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
+export default function Page({ demos, docs }) {
+ return Date pickers let the user select a date.
+ +Date pickers let the user select a date. Date pickers are displayed with: + +- Dialogs on mobile +- Text field dropdowns on desktop + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Requirements + +This component relies on the date management library of your choice. It supports [date-fns](https://date-fns.org/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs), [moment](https://momentjs.com/) and any other library via a public `dateAdapter` interface. + +Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with `LocalizationProvider`: + +```jsx +// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter +import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns'; +import LocalizationProvider from '@material-ui/lab/LocalizationProvider'; + +function App() { + return ( +Date pickers let the user select a range of dates.
+ +> ⚠️⚠️ The date range picker is unstable, and **not suitable** for use in production. ⚠️⚠️ +>Combined date & time picker.
+ +This component combines the date & time pickers. It allows the user to select both date and time with the same control. + +Note that this component is the [DatePicker](/components/date-picker/) and [TimePicker](/components/time-picker/) +component combined, so any of these components' props can be passed to the DateTimePicker. + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Requirements + +This component relies on the date management library of your choice. It supports [date-fns](https://date-fns.org/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs), [moment](https://momentjs.com/) and any other library via a public `dateAdapter` interface. + +Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with `LocalizationProvider`: + +```jsx +// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter +import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns'; +import LocalizationProvider from '@material-ui/lab/LocalizationProvider'; + +function App() { + return ( +Time pickers allow the user to select a single time.
+ +Time pickers allow the user to select a single time (in the hours:minutes format). +The selected time is indicated by the filled circle at the end of the clock hand. + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Requirements + +This component relies on the date management library of your choice. It supports [date-fns](https://date-fns.org/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs), [moment](https://momentjs.com/) and any other library via a public `dateAdapter` interface. + +Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with `LocalizationProvider`: + +```jsx +// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter +import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns'; +import LocalizationProvider from '@material-ui/lab/LocalizationProvider'; + +function App() { + return ( +