Why is the Datepicker calendar in Material UI not aligning properly? - javascript

I am using datepicker from "#mui/x-date-pickers/DatePicker".
import { DatePicker } from "#mui/x-date-pickers/DatePicker";
import { AdapterMoment } from "#mui/x-date-pickers/AdapterMoment";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
The dates and the weekdays should be in a straight line column
The columns are not in straight line
Did I accidentally overwrite the CSS somewhere?

I ran into a similar issue with the styling of the calendar icon (DatePicker Icon Button). I was able to modify it by following the suggestions in this post: How to change the icon in MUI DatePicker?
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
OpenPickerButtonProps={{ style: { marginRight: 2 } }}
openTo="year"
views={['year', 'month', 'day']}
label="Date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} helperText={null} />}
/>
</LocalizationProvider>

Related

acceptRegex in DatePicker MUI library not working as intended

I am trying to block invalid date input by using the acceptRegex property in Datepicker but couldn't get it applied. I don't want the user to enter an invalid date like 3022-56-45 by keyboard input.I should be allowing the numbers which forms valid date only. Here is my current implementation.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Date of Birth"
inputFormat="yyyy-MM-dd"
acceptRegex="/^d{4}-d{2}-d{2}$/"
mask={"____-__-__"}
minDate="1900-01-01"
value={dateOfBirth ? parseISO(dateOfBirth) : null}
onChange={(val) => {
setDateOfBirth(moment(val).utc().format("YYYY-MM-DD"));
}}
renderInput={(params) => (
<TextField fullWidth sx={{ pr: 3 }} {...params} />
)}
/>
</LocalizationProvider>

MUI DatePicker not working correctly with Formik

I am using Formik in my React project to process forms and using MUI UI components.
I am able to pick the day, month, but the year part does not change. If I manually type in year in the textfield, the year part is not reflected in the changed state.
Here's my code:
<LocalizationProvider dateAdapter={DateAdapter}>
<DatePicker
name="birthday"
id="birthday"
variant="standard"
label="Birthday"
value={formik.values.birthday}
renderInput={(params) => (
<TextField {...params} variant="standard" fullWidth/>
)}
onChange={(value) => formik.setFieldValue('birthday', value, true)}
error={formik.touched.birthday && Boolean(formik.errors.birthday)}
helperText={formik.touched.birthday && formik.errors.birthday}
/>
</LocalizationProvider>
The initial state:
const initialFormState = {
birthday: Date.now(),
};
All the other components are working correctly and changes in state show immediately.
The onChange property is not set in the DatePicker component. You have to move the onChange property from TextField to DatePicker.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
onChange={(value) => setFieldValue("birthday", value, true)}
value={values.birthday}
renderInput={(params) => (
<TextField
error={Boolean(touched.birthday && errors.birthday)}
helperText={touched.birthday && errors.birthday}
label="Birthday"
margin="normal"
name="birthday"
variant="standard"
fullWidth
{...params}
/>
)}
/>
</LocalizationProvider>
Also, the name, id, variant and label are TextField's properties.
Here is the working CodeSandbox link.

MUI DatePicker's shouldDisableDate prop leading to error

<Controller
name="toDate"
control={control}
defaultValue={null}
render={({ field }) => (
<DatePicker
format="DD/MM/yyyy"
value={field.value}
onChange={(e) => { setToDate(e); field.onChange(e); }}
minDate={fromDate}
shouldDisableDate={fromDate}
/>
)}
{...register("toDate",{ required: true })}
/>
I used the shouldDisableProp to disable the date which is selected inside another datepicker whose value is stored in a state variable 'fromDate'.
But when I press the datepicker it is leading to this error.
The minDate is working perfectly fine using the fromDate state variable.
The shouldDisableDate method receives a date param and expect a boolean.
import * as React from "react";
import TextField from "#mui/material/TextField";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
import DatePicker from "#mui/lab/DatePicker";
export default function BasicDatePicker() {
const [value, setValue] = React.useState<Date | null>(null);
const [fromDate, setFromDate] = React.useState<Date | null>(null);
return (
<>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="From Date"
value={fromDate}
onChange={(newValue) => {
setFromDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
<br />
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="To Date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
minDate={fromDate}
shouldDisableDate={(dateParam) => {
//your_condition here
//return true to disabled and false to enable
const fromFormatted = fromDate.toISOString().split("T")[0];
const currentDate = dateParam.toISOString().split("T")[0];
return fromFormatted === currentDate ? true : false;
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</>
);
}
UpdatedCode
So do something like that and you will achieve your goal.
In your case, compare dateParam with your fromDate var, to return true or false and disable or not the date.
Edit: Now is adapted to your real case. Just check it out.

Perform autocomplete with two keys - Material UI with React

I'm trying to autocomplete the input when searched with either of the two values - title and year. However, it does only work when I search with title. When I search with year, it does not show any options.
Sample code
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title || option.year}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
I have created a working example using Code Sandbox
Could anyone please help?
One way to make this work is to make the year part of the option label:
/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { top100Films } from "./movies";
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => `${option.title} (${option.year})`}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
If you don't want to display the year, but still want to match on it, the other way is to use the filterOptions prop to customize the matching:
/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { createFilterOptions } from "#material-ui/lab/Autocomplete";
import { top100Films } from "./movies";
const filterOptions = createFilterOptions({
stringify: (option) => `${option.title} ${option.year}`
});
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
filterOptions={filterOptions}
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
Related documentation: https://material-ui.com/components/autocomplete/#custom-filter

Material-UI Autocomplete & TextField triggers google autocomplete

I am trying to implement the Autocomplete component into my project but am getting the autofill/autocomplete from the browser after some time. Do you know how I can set it to off ?
<Autocomplete
id="combo-box-demo"
options={battleRepos}
getOptionLabel={option => option.full_name}
style={{ width: 500 }}
renderInput={params => (
<TextField {...params}
label="Combo box"
variant="outlined"
onBlur={event => console.log(event.target.value)}
fullWidth />
)}
/>
UPDATE
With the release of #material-ui/core 4.7.0 and #material-ui/lab 4.0.0-alpha.33, this is now fixed and no longer requires the workaround shown below.
This has been fixed in a recent pull request, but is not yet released (will be in the next release).
If you want to work around this prior to it being released (which will likely be within a few days), you can set inputProps.autoComplete = "off" like in the following:
<Autocomplete
id="combo-box-demo"
options={battleRepos}
getOptionLabel={option => option.full_name}
style={{ width: 500 }}
renderInput={params => {
const inputProps = params.inputProps;
inputProps.autoComplete = "off";
return (
<TextField
{...params}
inputProps={inputProps}
label="Combo box"
variant="outlined"
onBlur={event => console.log(event.target.value)}
fullWidth
/>
);
}
}
/>
Even with the latest:
"#material-ui/core"
"#material-ui/lab"
which contains the autoComplete property set to 'off', I wasn't able to get the autofill box go away.
Also tried setting the attribute on the form tag <form autoComplete="off">...</form>
To no avail.
The thing which resolved the issue was setting the autoComplete field to 'new-password'
<Autocomplete
id='id'
options={data}
onChange={(e, val) => input.onChange(val)}
renderInput={(params) => {
params.inputProps.autoComplete = 'new-password';
return <TextField {...params}
label={label} placeholder="Type to Search" />
}}
/>

Categories