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",
}}
/>
Related
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 have a very simple problem. I wanted to display the full date words, something like Nov 22th 2020.
Right now, i can only display the Month and the Date
Pls check my codesandbox
CLICK HERE
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
error={false}
helperText={null}
autoOk
fullWidth
inputVariant="outlined"
value={selectedDate}
onChange={handleDateChange}
variant="outlined"
/>
</MuiPickersUtilsProvider>
All you need is add prop format to picker, according to your example, you need format="MMM do yyyy". Here you can find more options
Into my react application I'm using material UI pickers and I want that the errors will be displayed in Italian language. The calendar it's ok with the Italian and I specify it in this way thanks to moment:
import * as moment from 'moment'
import 'moment/locale/it'
but this declaration seems not working for pickers. Can someone help me?
updated with working example =>
https://60qb9.csb.app/
You can use the invalidDateMessage prop of the KeyboardDatePicker:
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date"
}}
invalidDateMessage="Computer says no"
/>
Live example here: https://codesandbox.io/s/material-picker-set-invalid-date-message-rn2in
This is what I want using antd datepicker.
https://material-ui.com/components/pickers/
<KeyboardTimePicker
margin="normal"
id="time-picker"
label="Time picker"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
This is currently material-ui. Is there a way to add this same functionality using antd
You can look at antd-mask-input for similar implementation. It will do the job for you.
<MaskedInput
mask="11/1111"
name="expiry"
placeholder="mm/yyyy"
onChange={this._onChange}/>
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