I am trying to fit a datetime picker inside the paper of MUI autocomplete. Tried mui datepicker and tried to force open the datepicker but no luck. The native seems to work to an extend but it still needs to wire the date selection click to close the poper. here is demo:
https://codesandbox.io/s/material-demo-forked-pmgzp
Plz advise
I was trying to integrate DatePicker with autocomplete. I did it with useAutoComplete
import * as React from "react";
import { useAutocomplete } from "@mui/base/AutocompleteUnstyled";
import { DateRangePicker } from "mui-daterange-picker";
import { TextField } from "@mui/material";
import InputAdornment from "@mui/material/InputAdornment";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import moment, { Moment } from "moment";
export interface IDatePickerProps {
name: string;
startDateLabel: string;
endDateLabel: string;
value: [Moment, Moment];
setFieldValue: (
field: string,
value: [Moment, Moment],
shouldValidate?: boolean
) => void;
}
export default function UseAutocomplete({
name = "datepicker",
value = [moment(), moment().add(1, "months")],
startDateLabel = "2022-10-1",
endDateLabel = "2022-12-1",
setFieldValue
}) {
const { getRootProps, getInputLabelProps, getInputProps } = useAutocomplete({
id: "use-autocomplete-demo",
options: []
});
const [open, setOpen] = React.useState(false);
const toggle = () => setOpen(!open);
return (
<div>
<>
<div {...getRootProps()}>
<label {...getInputLabelProps()}>{name}</label>
<TextField
{...getInputProps()}
name={name}
placeholder={`${startDateLabel} - ${endDateLabel}`}
onClick={toggle}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<CalendarMonthOutlinedIcon />
</InputAdornment>
)
}}
value={`${moment(value[0]).format("YYYY-MM-DD")} - ${moment(
value[1]
).format("YYYY-MM-DD")}`}
/>
</div>
{
<DateRangePicker
open={open}
toggle={toggle}
onChange={(range) => {
let selectedValues = [
moment(range.startDate),
moment(range.endDate)
];
setFieldValue(selectedValues);
}}
/>
}
</>
</div>
);
}
Output:
