Support "empty" value in pickers' UX (mui#1770)

* Support empty dates for the DatePicker

* Support empty dates for TimePicker

* Support empty dates for mobile toobars

* Support empty dates in YearSelection

* Introduce `toolbarPlaceholder` prop for customization of empty date text

* Add tests

* Do not dispatch `changeFocusedDay` on each mount

* Fix crashes when rendering empty date with luxon and moment

* [TimePicker] Do not throw validation error if value={null}

* Update props description for TimePicker validation props

* Refactor ternary operator to aviod negatiation

* Remove `defaultHighlight` prop

.vscode/settings.json

@@ -1,5 +1,13 @@
 {
-  "cSpell.words": ["Formik", "Notistack", "Sourcable", "Unparsed", "ampm", "patreon"],
+  "cSpell.words": [
+    "Formik",
+    "Notistack",
+    "Sourcable",
+    "Unparsed",
+    "ampm",
+    "datetimepicker",
+    "patreon"
+  ],
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "javascript.implicitProjectConfig.checkJs": true

docs/pages/demo/datepicker/DatePickers.example.jsx

@@ -8,34 +8,35 @@ function DatePickersVariants(props) {
   return (
     <Fragment>
       <MobileDatePicker
-        renderInput={props => <TextField {...props} />}
         clearable
         label="For mobile"
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
         inputFormat={props.__willBeReplacedGetFormatString({
           moment: 'MM/DD/YYYY',
           dateFns: 'MM/dd/yyyy',
         })}
+        toolbarPlaceholder="Enter Date"
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
+        renderInput={props => <TextField {...props} />}
       />
 
       <DesktopDatePicker
         autoOk
         label="For desktop"
-        renderInput={props => <TextField {...props} />}
         minDate={new Date('2017-01-01')}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
+        renderInput={props => <TextField {...props} />}
       />
 
       <DatePicker
         disableFuture
-        renderInput={props => <TextField {...props} />}
         label="Responsive"
         openTo="year"
         views={['year', 'month', 'date']}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
+        renderInput={props => <TextField {...props} />}
       />
     </Fragment>
   );

docs/pages/demo/timepicker/index.mdx

@@ -6,7 +6,7 @@ import { Hidden } from '@material-ui/core';
 
 import * as TimeValidation from './TimeValidation.example';
 import * as BasicTimePicker from './BasicTimePicker.example';
-import * as InlineTimePicker from './InlineTimePicker.example';
+import * as TimePickers from './TimePickers.example';
 import * as StaticTimePicker from './StaticTimePicker.example';
 import * as SecondsTimePicker from './SecondsTimePicker.example';
 
@@ -27,7 +27,7 @@ A time picker should adjust to a user’s preferred time setting, i.e. the 12-ho
 
 #### Responsiveness
 
-<Example source={InlineTimePicker} />
+<Example source={TimePickers} />
 
 #### Time Validation
 

lib/.size-snapshot.json

@@ -1,21 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 190258,
-    "minified": 102356,
-    "gzipped": 26649,
+    "bundled": 191749,
+    "minified": 102786,
+    "gzipped": 26840,
     "treeshaked": {
       "rollup": {
-        "code": 83408,
+        "code": 83738,
         "import_statements": 2121
       },
       "webpack": {
-        "code": 92884
+        "code": 93230
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 301162,
-    "minified": 117618,
-    "gzipped": 33567
+    "bundled": 302846,
+    "minified": 118066,
+    "gzipped": 33767
+  },
+  "build/dist/material-ui-pickers.umd.min.js": {
+    "bundled": 260318,
+    "minified": 108307,
+    "gzipped": 30847
   }
 }