Develop Reference

How can I keep label not closed in MUI 5 datepicker?

Is there a way to keep Material 5 Datepicker to not close if there's a label but no value?
Currently:
Currently
What I try to get:
Expected
Code:
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
I tried to make an own <Box> label above <DatePicker> with styling but I was wondering if there is a cleaner option.

Use InputLabelProps={{ shrink: true }} prop on your TextField component like this:
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} InputLabelProps={{ shrink: true }} />}
/>

How to make Material UI Desktop Date Picker lose focus on blur

I hope you are doing well! I am facing a bit of a problem and I am unable to find a fix for it.
In my website I have 4 DesktopDatePickers (we are using #mui/x-date-picker) and we want to make the Date Picker appear when we click anywhere on the Textfield (not just the calendar icon). So we have the following code:
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Creation Date From"
inputFormat="MM/dd/yyyy"
value={dateFrom}
onChange={(newValue) => {
setDateFrom(newValue);
setCreationDateFromOpen(false);
}}
clearable={true}
onClose={() => setCreationDateFromOpen(false)}
open={creationDateFromOpen}
renderInput={(params) => (
<TextField
{...params}
onClick={() => {
setCreationDateFromOpen((open) => !open);
}}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
fullWidth
id="creationDateFrom"
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Creation Date To"
inputFormat="MM/dd/yyyy"
value={dateTo}
onChange={(newValue) => {
setDateTo(newValue);
setCreationdateToOpen(false);
}}
clearable={true}
open={creationDateToOpen}
onClose={() => setCreationdateToOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onClick={() => {
setCreationdateToOpen((open) => !open);
}}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Delivery Date From"
inputFormat="MM/dd/yyyy"
value={requestDateFrom}
onChange={(newValue) => {
setRequestDateFrom(newValue);
setModificationDateFromOpen(false);
}}
clearable={true}
open={modificationDateFromOpen}
onClose={() => setModificationDateFromOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
onClick={() => {
setModificationDateFromOpen((open) => !open);
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={8} md={5} lg={2}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="Delivery Date To"
inputFormat="MM/dd/yyyy"
value={requestDateTo}
onChange={(newValue) => {
setRequestDateTo(newValue);
setModificationDateToOpen(false);
}}
clearable={true}
open={modificationDateToOpen}
onClose={() => setModificationDateToOpen(false)}
renderInput={(params) => (
<TextField
{...params}
onKeyPress={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.code !== "Backspace") {
e.preventDefault();
}
}}
onChange={(e) => {
e.preventDefault();
}}
onClick={() => {
setModificationDateToOpen((open) => !open);
}}
fullWidth
size="small"
error={false}
/>
)}
/>
</LocalizationProvider>
</Grid>
However, We are running through a problem. If a user clicks on one textfield it Focuses then loses focus but displays the Date Picker, but directly after it, they click anywhere and the Date Picker disappears (which is supposed to happen) but the field regains Focus so it looks like the field is awaiting input. So clicking on any other field while the Date Picker is open causes that field to Focus then lose focus and the Browser focuses the Date Field again.
I tried using onFocus={(e)=>e.preventDefault()} in the renderInput TextField but the field still got focused. Using ref.current.blur() gives an error that blur() does not exist.
How can I make the Field not Focus when closing the DatePicker?

Unable to use helperText in mui date picker

Here is the code:
<div className={classes.container}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
fullWidth
inputFormat="dd/MM/yyyy"
// value={registeredDate}
disableFuture
{...props}
helperText="date"
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</div>
I am not seeing the helper text working. Please help

The helperText is the TextField's prop, you can set it like this:
<DesktopDatePicker
fullWidth
inputFormat="dd/MM/yyyy"
disableFuture
{...props}
renderInput={(params) => <TextField helperText="date" {...params} />}
/>

Change name of month in Material Ui React

I use DatePicker from Material Ui. I need to change the name of the month. How can I do it?
For example, I have to change from August to Avqust or from March to Mart enter image description here
My code:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label=""
value={selectedDate}
minDate={"02-01-1920"}
maxDate={"02-29-2020"}
onChange={(newValue) => {
setSelectedDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>

You can use local prop of LocalizationProvider, to change the language of DatePicker's days and months.
change the locale for the date-fns adapter.
From Documentation of Mui: https://mui.com/components/date-picker/#localization
import { az } from "date-fns/locale";
<LocalizationProvider dateAdapter={AdapterDateFns} locale={az}>
<DatePicker
label=""
value={selectedDate}
minDate={new Date("02-01-1920")}
maxDate={new Date("02-29-2020")}
onChange={(newValue) => {
setSelectedDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
https://codesandbox.io/s/localizeddatepicker-material-demo-forked-uppsz8?file=/demo.js

Reactjs: How to pass name, value to Material ui autocomplete?

I am using material ui autocomolete. I want to pass name, value and onchange on autocomplete, the same way we do for TextField. How to do achieve that. ?? My code is not working.
<Autocomplete
id="combo-box-demo"
fullWidth
options={props.propsmaster}
getOptionLabel={(option) => option.abc || option.xyz}
size="small"
renderInput={(params) =>
<TextField
{...params}
label={propsMain.abc}
variant="outlined"
name="name"
onChange={(e) => exhandleChange(e)}
value={values.name}
/>
}
/>

<Autocomplete
id="combo-box-demo"
fullWidth
options={props.propsmaster}
getOptionLabel={(option) => option.abc || option.xyz}
size="small"
name="name"
onChange={(e) => exhandleChange(e)}
value={values.name}
renderInput={(params) =>
<TextField
{...params}
label={propsMain.abc}
variant="outlined"
/>
}
/>