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} />}
/>
Related
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 }} />}
/>
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?
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
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)
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"
/>
}
/>