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}/>
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 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",
}}
/>
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
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