How do I pre-fill MUI DatePicker with default dates without encountering value.isValid errors?

Below is a checklist to help you resolve the issue:

---

1. Wrap Your DatePickers in a LocalizationProvider

MUI’s pickers require a date adapter via the LocalizationProvider. For example, if you want to use Moment, do the following:

JAVASCRIPTCopied
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      {/* Your DatePickers here */}
    </LocalizationProvider>
  );
}

---

2. Ensure You Pass a Valid Date Instance

The error “value.isValid is not a function” means that the object you’re passing isn’t an actual Moment (or Dayjs) instance. When pre-filling, do one of the following:

• For string values: Convert the string to a Moment object only once:

  JAVASCRIPTCopied
  if (userItem.startDate !== null) {
    const convertedDate = moment(userItem.startDate);
    setValue("userItem.startDate", convertedDate);
    setStartDate(convertedDate);
  }

• For already-converted values: Ensure you’re not double-wrapping. If the value is already a Moment instance, simply pass it.

Note: Avoid writing things like value={moment(startDate)} in your render because if startDate is already a Moment object it might lead to unexpected behavior (even an infinite render loop). Instead, keep it consistent and set it once when loading data.

---

3. Data Consistency on Save and Load

When saving your dates, if you’re storing the Moment instance’s internal properties then on rehydration your “raw” object won’t have the Moment prototype methods (including isValid). Instead, store the ISO string (or timestamp) and convert it back upon load:

JAVASCRIPTCopied
// When saving:
const dateToSave = startDate.toISOString();

// When loading:
const loadedDate = moment(userItem.startDate); // if userItem.startDate is an ISO string
setStartDate(loadedDate);

---

4. Use the Correct Date Library Adapter

If you try switching to Dayjs by wrapping your date like dayjs(startDate) but you encounter errors (like t.clone is not a function), make sure you:

• Import and use the correct adapter for Dayjs:

  JAVASCRIPTCopied
  import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

• And wrap your DatePicker in a LocalizationProvider with AdapterDayjs:

  JAVASCRIPTCopied
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    {/* Your DatePickers */}
  </LocalizationProvider>

• Again, pass either a valid Dayjs object or null.

---

Summary

1. Wrap your components in a LocalizationProvider with the appropriate date adapter.
2. Store and load dates consistently using strings (like ISO) and convert them into a valid date library instance (Moment or Dayjs) when initializing your DatePicker.
3. Avoid double-wrapping your date values. Only call moment() (or dayjs()) once when converting a raw string.

Following these steps ensures that the DatePicker receives an instance it expects, avoiding the “value.isValid is not a function” error.