[pickers] New unstable field components (mui#5504)

docs/data/date-pickers/date-field/BasicDateField.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+
+export default function BasicDateField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateField label="Basic date field" />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/BasicDateField.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+
+export default function BasicDateField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateField label="Basic date field" />
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/BasicDateField.tsx.preview

@@ -0,0 +1,3 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <DateField label="Basic date field" />
+</LocalizationProvider>

docs/data/date-pickers/date-field/CustomDateField.tsx.preview

@@ -0,0 +1,9 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <DateField
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    variant="standard"
+  />
+</LocalizationProvider>

docs/data/date-pickers/date-field/CustomDateFormat.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+import Stack from '@mui/material/Stack';
+
+export default function CustomDateFormat() {
+  const [value, setValue] = React.useState(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
+        <DateField
+          label="Dash separator"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd-MM-yyyy"
+        />
+        <DateField
+          label="Dash and white space separator"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd / MM / yyyy"
+        />
+        <DateField
+          label="Full letter month"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd MMMM yyyy"
+        />
+        <DateField
+          label="Date and time format"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="Pp"
+        />
+        <DateField
+          label="Time format"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="p"
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/CustomDateFormat.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+import Stack from '@mui/material/Stack';
+
+export default function CustomDateFormat() {
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
+        <DateField
+          label="Dash separator"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd-MM-yyyy"
+        />
+        <DateField
+          label="Dash and white space separator"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd / MM / yyyy"
+        />
+        <DateField
+          label="Full letter month"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="dd MMMM yyyy"
+        />
+        <DateField
+          label="Date and time format"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="Pp"
+        />
+        <DateField
+          label="Time format"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          format="p"
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/CustomInputProps.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import CancelIcon from '@mui/icons-material/Close';
+
+export default function CustomInputProps() {
+  const [value, setValue] = React.useState(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
+        <DateField
+          label="Custom variant"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          variant="filled"
+        />
+        <DateField
+          label="Disabled"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          disabled
+        />
+        <DateField
+          label="Read only"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          readOnly
+        />
+        <DateField
+          label="Clearable"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          InputProps={{
+            endAdornment: (
+              <IconButton size="small" onClick={() => setValue(null)}>
+                <CancelIcon />
+              </IconButton>
+            ),
+          }}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/CustomInputProps.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { Unstable_DateField as DateField } from '@mui/x-date-pickers/DateField';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import CancelIcon from '@mui/icons-material/Close';
+
+export default function CustomInputProps() {
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
+        <DateField
+          label="Custom variant"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          variant="filled"
+        />
+        <DateField
+          label="Disabled"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          disabled
+        />
+        <DateField
+          label="Read only"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          readOnly
+        />
+        <DateField
+          label="Clearable"
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          InputProps={{
+            endAdornment: (
+              <IconButton size="small" onClick={() => setValue(null)}>
+                <CancelIcon />
+              </IconButton>
+            ),
+          }}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/date-field/CustomUIDateField.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormLabel from '@mui/joy/FormLabel';
+import JoyTextField from '@mui/joy/TextField';
+import InputUnstyled from '@mui/base/InputUnstyled';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
+
+const JoyDateField = (props) => {
+  const { inputRef, inputProps } = useDateField(props);
+
+  return (
+    <JoyTextField
+      {...inputProps}
+      componentsProps={{ input: { componentsProps: { input: { ref: inputRef } } } }}
+    />
+  );
+};
+
+const UnstyledDateField = (props) => {
+  const { inputRef, inputProps } = useDateField(props);
+
+  return (
+    <InputUnstyled
+      {...inputProps}
+      componentsProps={{ input: { ref: inputRef, style: { width: '100%' } } }}
+    />
+  );
+};
+
+const BrowserInputDateField = (props) => {
+  const { inputRef, inputProps } = useDateField(props);
+
+  return <input {...inputProps} ref={inputRef} />;
+};
+
+export default function CustomUIDateField() {
+  const [value, setValue] = React.useState(new Date());
+
+  const handleChange = (newValue) => setValue(newValue);
+
+  return (
+    <CssVarsProvider>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Stack spacing={2}>
+          <JoyDateField
+            label="Using @mui/joy TextField"
+            value={value}
+            onChange={handleChange}
+          />
+          <FormControlLabel
+            label={<FormLabel>Using unstyled input</FormLabel>}
+            control={<UnstyledDateField value={value} onChange={handleChange} />}
+            labelPlacement="top"
+            sx={{ alignItems: 'stretch' }}
+          />
+          <FormControlLabel
+            label={<FormLabel>Using browser input</FormLabel>}
+            control={<BrowserInputDateField value={value} onChange={handleChange} />}
+            labelPlacement="top"
+            sx={{ alignItems: 'stretch' }}
+          />
+        </Stack>
+      </LocalizationProvider>
+    </CssVarsProvider>
+  );
+}