I want to add the placholder to MUI 5 date picker, here is the MUI 5 datepickerlink: https://mui.com/x/react-date-pickers/date-picker/
The thing I want to achieve is: https://www.awesomescreenshot.com/image/31706755?key=096a75ccfcf711b0806280400c10727f
You can refer me to this chat, but it is not working in my case: How to set the placeholder text of the MUI DatePicker?
I also don't want to add label as the user click in the filed the lable pushed to the border.
So, my requirement is add the placholder text like we can add in the textfiled. I hope now it is clear now.
You can add placeholder on input props like this :
<DatePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
inputProps={{
placeholder: "Placeholder"
}}
renderInput={(params) => <TextField {...params} />}
/>
Happy coding.
Related
I have a MUI DateTimePicker in my react app, and I would like to disable the text input so that it is only possible to change the date/time by clicking on the icon and launching the overlays to edit them.
I have tried a few things, such as adding disabled={true} to the renderInput, like this:
renderInput={(params: any) => <TextField
{...params}
disabled={true}
InputProps={{...params.InputProps, disableUnderline: true}}
variant="standard"/>}
Doesn't quite work as expected though. I have tried a lot of other things too, but not sure how that detail would support my question.
Suggestions?
Adding readOnly to the inputProps which will be passed down to the native html input element will do the trick. This also leaves the MUI component in its "normal" visual state.
<TextField
{...params}
disabled={true}
InputProps={{...params.InputProps, disableUnderline: true}}
inputProps={{ ...params.inputProps, readOnly: true }}
variant="standard"
/>
I was able to do exactly what you're asking by just adding the disabled prop to the TextField in renderInput.
<DateTimePicker
label="Date&Time picker"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} disabled />}
/>
It's possible that you are trying to set the disabled property to true when it just assumes the property being on the component means it is disabled.
I have a functional Mui Autocomplete that lets the user select from options or make his own input. However, the value is not stored on useState when an option is clicked, only when the input loses its focus. I have checked some tutorials and apparently I have nothing different, but theirs work as expected (selected option on selection is stored as useState value).
CodeSandbox here
<Autocomplete
key={"casa"+index}
freeSolo
autoSelect
fullWidth
value={i.casa}
onChange={e=>ponervalor(e,index)}
options={casasNamesList}
id={"casasNamesList"+index}
size="small"
color="primary"
autoComplete={false}
renderOption={(props, option) => {
return (
<span {...props} style={{ backgroundColor: "primary", border:"0.5px solid black"}}>{option}</span>);
}}
renderInput={(params) => <TextField {...params} label="Casa" name="casa" variant="outlined" />}
/>
Edit: To add information, I believe the property autoSelect has something to do with this problem of mine, as it states:
If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different
option or changes the character string in the input.
However, if I set it to false, the selected option is never stored as value.
Well, finally I was able to resolve it by not using onChange and use instead:
onInputChange={(e,newvalue)=>ponervalorcasa(e,newvalue,index)}
I'm working on replacing the DatePicker component in our app with the new #mui DatePicker, and I'm having some trouble getting the TextField to render without the floating label and the notched input style. Here is my latest attempt:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onError={(reason, value) => console.log(reason, value)}
disableOpenPicker
className={styles.datepicker}
disableMaskedInput
onChange={() => undefined}
onAccept={handleAccept}
open={datePickerVisible}
value={getSafeDate(value) as Date}
onClose={partial(handleDatepickerVisibilityChange, false)}
{...datepickerProps}
renderInput={(params) => (
<TextField
id={id}
{...inputProps}
{...params}
onChange={handleInputChange}
error={errorText !== null}
helperText={errorText}
onBlur={handleValueChange}
onKeyPress={handleKeyPress}
hiddenLabel
size='small'
fullWidth
/>
)}
/>
</LocalizationProvider>
I've tried many different combinations for TextField props, such as adding InputLabelProps={{shrink:false}}, InputLabelProps={{shrink:true}}, and inputProps={{notched:false}} but always end up looking like this:
Does anyone have an idea of how to correct this, or if it's possible?
Thanks!
The issue was fixed in release v5.4.0
[TextField] Remove notch when no label is added (#30560) #alisasanib
Updating to v5.4.0 should solve the issue.
I'm working on migrating material-ui v4 to MUI v5 and I was using material-ui-pickers along with it.
I read the migration guide: https://mui.com/guides/pickers-migration/ and the docs, but I can't find and equivalent for the emptyLabel feature in: https://material-ui-pickers.dev/api/KeyboardDatePicker
emptyLabel on material-ui-pickers allowed you to set a custom text, that showed up when the value on the picker was set to null.
Is this a missing feature in MUI's date picker or am I missing something?
KeyboardDatePicker is no longer maintained and is now part of the lab components in MUI v5 as DatePicker (as explained in migration guide).
Actually there's no "emptyLabel" prop for DatePicker but you can achieve the same effect using the label prop and a check on your value provided to DatePicker:
<DatePicker
label={value === null ? "null value!" : "placeholder"}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
see example here
Wouldn't using placeholder cover your desired use case?
<DatePicker
...
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: "Place for extra info"
}}
/>
)}
/>
Here is a live codesandbox example.
I am trying to open the Datepicker by pressing tab (when you are entering mutiple fields it is easy to use tab instead of clicking in the textbox) Only problem is i dont know how to do this:
<MobileDatePicker
variant="outlined"
label="Date of birth"
disableFuture
openTo="year"
views={['year', 'month', 'date']}
format="dd/MM/yyyy"
value={dateOfBirth}
onChange={e => {
setDateOfBirth(e);
setDateOfBirthError(false);
}}
error={dateOfBirthError !== false}
helperText={dateOfBirthError}
fullWidth
/>
anyone know how i can get this datepicker to open when i press tab?
You can use onFocus and controlled open prop in order to open it onFocus
But you likely want to have an accessible version of DatePicker so you can use v4.0.0-alpha version and DesktopDatePicker or just DatePicker in order to achieve built-in a11y