The problem occours when I'm using MUI DatePicker with LocalizationProvider and AdapterDateFns with Hungarian local.
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={hu}>
<DesktopDatePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: "yyyy. MM. dd."
}}
/>
)}
/>
</LocalizationProvider>
All latest dependencies.
The problem is when I'm trying to type in the date manually the curzor jumps around wierd in the month and day part. The LocalizationProvider transforms the input mask to "yyyy. MM. dd." and that is what I want to have, but it seems like the curzor doesn't adapt to the new format and bugs out.
You can try it here:
CodeSandbox
Is there any way to fix this or work around it?
NOTE: The cause seems to be the date-fns. It works fine with dayjs, but I have to use date-fns, so I have to make that work somehow.
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 am using material ui's date picker.
https://mui.com/components/date-picker/#basic-usage
The default format of the datepicker is MM-dd-yyyy (02-23-2022). I want to change the default format to be dd-MM-yyyy` eg. (23-02-2022).
To have it display in the correct format i have used the inputFormat. However i noticed that the onChange value is still an object and therefore i have used the format function from the adapter date-fns to format the value before storing it in state.
However, although the console logs the correct foramt, the value being set in state for the date is still using the old format (MM-dd-yyyy)
What am i doing wrong here. Please see the ccodesandbox for continence https://codesandbox.io/s/basicdatepicker-material-demo-forked-460hxz?file=/demo.js:418-820
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(format(newValue, "dd-MM-yyyy"));
}}
renderInput={(params) => <TextField {...params} />}
mask="__-__-____"
inputFormat="dd-MM-yyyy"
/>
</LocalizationProvider>
You need to add a 'rifmFormatter' prop, and write a function to handle it. I am working on MUI X, but it is the same as in previous versions. see: https://mui.com/x/api/date-pickers/date-picker/
You don't need to apply any format for the data. inputFormat="dd-MM-yyyy" will take care of everything on MUI Datepicker. This code is working perfectly. Whatever value you are getting is basically a Date type. You can apply format on that.
<DatePicker
views={["day"]}
label="Just date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
inputFormat="dd-MM-yyyy"
renderInput={(params) => <TextField {...params} helperText={null} />}
/>;
Attaching the sandbox for reference.
Using MUI-5 time picker for our React app and are trying to implement mask for keyboard input. However, the only way for mask to work is when the ampm prop is false and only seem to work for hh:mm
Here is the only code I can make the mask to work
<LocalizationProvider dateAdapter={DateAdapterLuxon}>
<Stack spacing={3}>
<TimePicker
value={value}
onChange={setValue}
inputFormat="hh:mm"
ampm={false}
renderInput={(params) => <TextField {...params} />}
/>
</Stack>
</LocalizationProvider>
if I remove ampm={false} (the default is true) then masking will not work.
even with ampm={false} it will not accept custom mask or if inputFormat is anything other then hh:mm
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.