How can I disable showing underline to material-ui-pickers?
sandbox
https://codesandbox.io/s/l2ykr7kwvz?from-embed
I want to removing underline to its TextField.
I tried
disableUnderline={true}
underlineStyle={{display: 'non'}}
showingUnderline={false}
But nothing works, How can I hide underline?
<DatePicker
underlineStyle={{display: 'none'}}
value={selectedDate}
onChange={this.handleDateChange}
animateYearScrolling={false}
/>
material-ui date-picker is a text field from the foundation and you can remove the underline simply using input-props
(DatePicker, TimePicker and DateTimePicker all will work this way)
<DatePicker
value={selectedDate}
InputProps={{
disableUnderline: true,
}}
onChange={this.handleDateChange}
/>
find the example from here
hope this will help you
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 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.
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.
Im trying to use the mui's onscreen always on Calender component and it says that there is no component here in the pickers folder like that, but I found some answers saying that material ui has an inbuild onscreen Calender ex: here
I found the answer - refer to this document .
Using the code like this variant="static";
<KeyboardDatePicker
disableToolbar
variant="static"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
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