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
Related
I am using material ui + react hook form for my form
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Controller
name="date_of_birth"
control={control}
defaultValue={new Date()}
render={({ field: { ref, ...rest } }) => (
<KeyboardDatePicker
inputRef={ref}
margin="dense"
fullWidth
id="date-picker-dialog"
label="Date of Birth"
format="yyyy-MM-dd"
KeyboardButtonProps={{
"aria-label": "change date",
}}
error={errors.date_of_birth ? true : false}
{...rest}
/>
)}
/>
</MuiPickersUtilsProvider>
With the in the react hook form i get date_of_birth in the format 2021-08-29T00:46:27.103Z but i want it to be 2021-08-29
HOw can i do this
Tried
import DateFnsUtils from "#date-io/date-fns";
const dateFns = new DateFnsUtils();
... in the onSubmit function
... example
date = dateFns.parseISO('2021-08-29T01:23:43.495Z')
... here i get error parseISO is not a function of dateFns
formated = dateFns.format(date,"yyyy-MM-dd")
How to use dateFns to format it to yyyy-MM-dd
As you can see in their document. Just use the format function.
https://date-fns.org/docs/Getting-Started
Updating my answer:
For date formatting purposes you may use date-fns or moment.js. #date-io is an abstraction of various date libraries like moment, date-fns, luxon, etc. In your case, you can directly use date-fns library and use their features.
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
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",
}}
/>
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