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

MUI React, Minimum Date

How can I set Minimum Date, so the user can't pick To Date that is before From Date.
Here is my Two Date Pickers, using moment to format the date.
<DatePicker
value={fromDate}
label="From Date"
color="primary"
inputFormat="DD/MM/YYYY"
onChange={(fromDateValue) =>
setFromDate(moment(fromDateValue).format('DD-MMM-YYYY', moment.ISO_8601))
}
renderInput={(params) => <TextField {...params} size="small" margin="dense" sx={{ width: 238 }} />}
/>
<DatePicker
value={toDate}
label="To Date"
color="primary"
inputFormat="DD/MM/YYYY"
onChange={(toDateValue) => setToDate(moment(toDateValue).format('DD-MMM-YYYY', moment.ISO_8601))}
renderInput={(params) => (
<TextField {...params} size="small" margin="dense" sx={{ width: 218 }} color="primary" />
)}
/>

You can use the minDate prop:
Min selectable date.
You can add it to your second DatePicker, like:
minDate={fromDate}
(Working example)

Getting error as 'handleChange is not a function' while selecting date in Material UI

On selecting specific date in DatePicker component, getting error as 'handleChange is not a function' as mentioned above. DatePicker component is wrapped in Controller component of react-hook-form. Expected to display date on DatePicker input. How could it be resolved? See the code below:
<form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
<Controller
control={control}
name="date"
render={({ handleDateChange, selectedDate, ref }) => (
<>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<DatePicker
ref={ref}
value={selectedDate}
onChange={handleDateChange}
format={`d | ` + `MMMM | ` + `yyyy`}
disablePast
animateYearScrolling
margin="normal"
style={{ cursor: "pointer" }}
/>
</Grid>
</MuiPickersUtilsProvider>
<br />
</>
)}
rules={{
required: "Date is required"
}}
/>
</form>
Here is the CodeSandbox link: https://codesandbox.io/s/jolly-currying-lwtrj
Any suggestion or code changes is highly appreciated.

Firstly, there is no such properties as handleDateChange or selectedDate, perhaps this is what you mean:
render={({ onChange: handleDateChange, value: selectedDate, ref }) => (
Secondly, you're using react-hook-form v7, the render method signature of Controller was changed. See the migration guide here. You need to get the input props from the field property, not directly from the render props:
render={({ field }) => {
const {
onChange: handleDateChange,
value: selectedDate,
ref
} = field;
Full working code:
<Controller
control={control}
name="date"
render={({ field }) => {
const {
onChange: handleDateChange,
value: selectedDate,
ref
} = field;
return (
<>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<DatePicker
ref={ref}
value={selectedDate}
onChange={handleDateChange}
format={`d | ` + `MMMM | ` + `yyyy`}
disablePast
animateYearScrolling
margin="normal"
style={{ cursor: "pointer" }}
/>
</Grid>
</MuiPickersUtilsProvider>
<br />
</>
);
}}
rules={{
required: "Date is required"
}}
/>
Live Demo