MUI Desktop Date picker is not showing after deployment in the server.I have used mui/lab/DatePicker but now in MUI documentation now it says
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from
'#mui/x-date-pickers/LocalizationProvider';
I have also used this,but after using this it is showing localeText is undefined.
enter code here
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import DatePicker from "#mui/lab/DatePicker";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
<LocalizationProvider
dateAdapter={AdapterDateFns}
>
<DatePicker
label="জন্ম তারিখ"
name="birthDate"
value={x.birthDate}
disabled={grantorDisabled[i].disableGrantor}
onChange={(e) => handleDateChangeEx(e, i)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
size="small"
style={{ backgroundColor: "#FFF" }}
/>
)}
/>
</LocalizationProvider>
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns';
import { DateTimePicker, DatePicker, LocalizationProvider } from '#mui/x-date-pickers';
import datepickers and adapter from x-date-pickers now, earlier they were in /labs
Related
like in mui components make an asterisk before the text?
The documentation doesn't say anything about it.
https://mui.com/material-ui/react-text-field/
The documentation makes it very clear under Input Adornments. You can put whatever you want in the beginning or end of the text field using input adornments.
Sample code:
import * as React from 'react';
import Box from '#mui/material/Box';
import InputAdornment from '#mui/material/InputAdornment';
import TextField from '#mui/material/TextField';
export default function InputAdornments() {
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
<TextField
id="outlined-start-adornment"
sx={{ m: 1, width: '25ch' }}
InputProps={{
startAdornment: <InputAdornment position="start">*</InputAdornment>,
}}
/>
</div>
</Box>
);
}
By default the helperText "Some important text" is not aligned to the far left. How can it be done?
You can use makeStyles for your css and then apply your generated styles to the className prop inside of the FormHelperTextProps prop from TextField.
import React from "react";
import { TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
helperText: {
marginLeft: 0
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<TextField
FormHelperTextProps={{
className: classes.helperText
}}
label="Test"
helperText="Helper text..."
variant="outlined"
/>
</div>
);
}
Live demo:
I want to make a Form with validation for that I used react-hook-form with Material UI. And for validation, yup and hook/resolver are also used. when I click the Checkbox I want to show another textField but the checkbox is not working. watch is used for that which comes from react-hook-form(useForm). what is my mistake? plz, help.
Here is my code: - codesanbox
You've to use the Controller or useController for the MUI checkbox, for instance:
<Controller
name="hasPhone"
control={control}
render={({ field }) => (
<FormControlLabel
control={
<Checkbox
defaultValue={data.hasPhone}
defaultChecked={data.hasPhone}
color="primary"
onChange={(e) => field.onChange(e.target.checked)}
checked={field.value}
/>
}
label="Do you have a phone"
/>
)}
/>
👉🏻 https://codesandbox.io/s/practical-morning-v6yp1
for those who are struggling with MUI5, NextJs 12 and RHF 7 in typescript, here is how I make it working
Please note that the RHF Controller is inside the FormControlLabel and not the opposite. Also the defaultValue matters
import { FormControlLabel } from "#mui/material";
import Checkbox, { CheckboxProps } from "#mui/material/Checkbox";
import { Control, Controller } from "react-hook-form";
type ICheckBoxFieldProps = CheckboxProps & {
name: string;
control: Control;
label: string;
};
const CheckBoxField: React.FC<ICheckBoxFieldProps> = ({
name,
control,
label,
defaultChecked,
...rest
}: ICheckBoxFieldProps): JSX.Element => {
return (
<FormControlLabel
label={label}
control={
<Controller
name={name}
control={control}
defaultValue={!!defaultChecked}
render={({ field }) => (
<Checkbox
checked={field.value}
onChange={field.onChange}
{...rest}
/>
)}
/>
}
/>
);
};
export default CheckBoxField;
and how to call it inside a form or a FormProvider
<CheckBoxField
name="istrue"
control={control}
defaultChecked={true}
label="isTrue"
color="success"
/>
I am trying to use react-hook-form to simply generate some data from two material UI text fields and display the data in the console, but the when clicking the submit button I cannot see anything in the console.log, this is the code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import { useForm } from 'react-hook-form';
const useStyles = makeStyles({
container: {
margin: '1rem',
'& .MuiTextField-root': {
margin: '1rem 0',
},
},
});
const GuestJoiningForm = () => {
const { register, handleSubmit } = useForm()
const onSubmit = (data) => {
console.log(data);
};
const classes = useStyles();
return (
<form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
<TextField
ref={register}
label="Name"
name="name"
variant="outlined"
fullWidth/>
<TextField
ref={register}
multiline rows={3}
label="Content"
name="content"
variant="outlined"
fullWidth/>
<Button
color="primary"
variant="contained">Submit</Button>
</form>
)
};
export default GuestJoiningForm;
When I enter data into the text fields and hit the submit button, nothing happens and I would expect to see an object of the data I enter. I don't imagine its the console I'm using, but it's in Safari and the only thing I've noticed is something that says [HMR] Waiting for update signal from WDS...
Not sure if that has anything to do with it, but would really appreciate any help on this issue if you get time, thank you.
Last thing to add! I added a type={'submit'} to the button, and the console responded with empty {}, which even though didn't fix the issue I guess proves that the console is working
You need to add type attribute as submit in the Submit button.
<Button type="submit" color="primary" variant="contained">
Submit
</Button>;
You need to add inputRef prop for both the TextField components like this
<TextField
ref={register}
inputRef={register}
label="Name"
name="name"
variant="outlined"
fullWidth
/>
<TextField
ref={register}
multiline
rows={3}
inputRef={register}
label="Content"
name="content"
variant="outlined"
fullWidth
/>
Here's a sandbox for your form.
I have this code:
import React from 'react';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import ArrowForwardIos from '#material-ui/icons/ArrowForwardIos';
import ListSubheader from '#material-ui/core/ListSubheader';
import Switch from '#material-ui/core/Switch';
import TextField from '#material-ui/core/TextField';
import ListItemAvatar from '#material-ui/core/ListItemAvatar';
import Avatar from '#material-ui/core/Avatar';
import FolderIcon from '#material-ui/icons/Folder';
import ListItemSecondaryAction from '#material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '#material-ui/icons/Delete';
import IconButton from '#material-ui/core/IconButton';
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}
export default App;
"Single-line item" and "Secondary text" is vertically aligned, but I need align it horizontally. Do you have any idea how to do it?
Instead of left I need rendering on the right here:
https://gitlab.com/j4nos/tableitem/blob/master/src/App.js
How? :)
I managed to get the desired output using a few other elements and referring the material-ui documentation. here is a working example: https://codesandbox.io/s/sweet-bose-4e26h
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<Box
textAlign="right"
style={{ paddingRight: 5 }}
>
Single-line item
</Box>
<ListItemText
secondaryTypographyProps={{ align: "left" }}
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}
Alternative using Material-UI's built-in overrides on ListItemText.classes.root as seen below:
<ListItem className={classes.listItem}>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
className={classes.listText}
primary={`${tc('Foo')}:`}
/>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
secondary={bars}
/>
</ListItem>
Classes in useStyles:
listItemRootOverride: { /* this is the important one */
flex: 'none',
paddingRight: 4
},
listItem: {
padding: theme.spacing(0)
},
listText: {
color: theme.palette.common.black,
paddingRight: theme.spacing(2)
}
Example output (disregard minor alignment issue):