value.isBefore is not a function in AdapterDayjs.

[thecowmilk]

Duplicates

• I have searched the existing issues

Steps to reproduce 🕹

Link to live example: http://35.246.187.244/User/ServiceRequest?requestType=Moving this is my hosted react app at the moment and when you fill click on one category then fill, you will get a blank screen and in the console you will get a 'e.isBefore' is not a function.

Steps: There's not any specific steps however I can provide with pieces of code where this was used and the error happened out of blue but I'm pretty sure I haven't moved any piece of code which had to do with the DatePicker. More detailed error in a test env is:

value.isBefore is not a function
./node_modules/@mui/x-date-pickers/AdapterDayjs/AdapterDayjs.js/AdapterDayjs/this.isBeforeDay@http://localhost:3000/static/js/bundle.js:65400:22
validateDate@http://localhost:3000/static/js/bundle.js:75732:47
useValidation@http://localhost:3000/static/js/bundle.js:74982:35
usePickerValue@http://localhost:3000/static/js/bundle.js:74556:64
usePicker@http://localhost:3000/static/js/bundle.js:74263:94
useDesktopPicker@http://localhost:3000/static/js/bundle.js:72228:60
DesktopDatePicker@http://localhost:3000/static/js/bundle.js:68006:91
renderWithHooks@http://localhost:3000/static/js/bundle.js:114896:31
updateForwardRef@http://localhost:3000/static/js/bundle.js:117467:24
beginWork@http://localhost:3000/static/js/bundle.js:119514:20
callCallback@http://localhost:3000/static/js/bundle.js:104488:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:104532:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:104589:35
beginWork$1@http://localhost:3000/static/js/bundle.js:124463:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:123710:16
workLoopSync@http://localhost:3000/static/js/bundle.js:123633:26
renderRootSync@http://localhost:3000/static/js/bundle.js:123606:11
performSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:123298:38
flushSyncCallbacks@http://localhost:3000/static/js/bundle.js:111328:26
./node_modules/react-dom/cjs/react-dom.development.js/ensureRootIsScheduled/<@http://localhost:3000/static/js/bundle.js:122929:17

Code where it is been used (the project is not developed by me but I wanted to finish by adding some more features and then this happened outta blue).

<div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DesktopDatePicker
                disablePast
                className={flagdate && "border border-danger"}
                label={t("Date")}
                required
                inputFormat="MM/DD/YYYY"
                value={categorydate}
                onChange={(e) => {
                  fnCategoryDate(e);
                  inputEvent(e);
                }}
                renderInput={(params) => <TextField {...params} name="date" />}
              />
              {formErrors.date && (
                <span className="error">{formErrors.date}</span>
              )}

Also in another file:

{requestType !== "Moving" && (
              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DesktopDatePicker
                  disablePast
                  className={flagdate && "border border-danger"}
                  label={t("Date")}
                  required
                  inputFormat="MM/DD/YYYY"
                  value={categorydate}
                  onChange={(e) => {
                    fnCategoryDate(e);
                    inputEvent(e);
                  }}
                  renderInput={(params) => (
                    <TextField {...params} name="date" />
                  )}
                />
                {formErrors.date && (
                  <span className="error">{formErrors.date}</span>
                )}
              </LocalizationProvider>
            )}

Current behavior 😯

It will create a blank page and errors in the console/

Expected behavior 🤔

It should not be causing any errors.

Context 🔦

No response

Your environment 🌎

System:
OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
Yarn: Not Found
npm: 10.2.0 - ~/Documents/projects/easy-compare/easyCompare-FrontEnd/node_modules/.bin/npm
Browsers:
Chrome: 118.0.5993.70
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.20
@mui/core-downloads-tracker: 5.14.14
@mui/icons-material: ^5.14.11 => 5.14.14
@mui/lab: ^5.0.0-alpha.149 => 5.0.0-alpha.149
@mui/material: ^5.14.11 => 5.14.14
@mui/private-theming: 5.14.14
@mui/styled-engine: 5.14.13
@mui/system: 5.14.14
@mui/types: 7.2.6
@mui/utils: 5.14.13
@mui/x-date-pickers: ^6.16.0 => 6.16.2
@mui/x-date-pickers-pro: ^6.16.0 => 6.16.2
@mui/x-license-pro: 6.10.2
@mui/x-tree-view: 6.0.0-alpha.1
@types/react: 18.2.20
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
styled-components: ^6.0.8 => 6.1.0

Search keywords:

[thecowmilk]

I fixed this by commenting where the DesktopDatePicker was used the most however I'd probably look for a solution more rather than a workaround.

[flaviendelangle]

Hi,
Thanks for your contribution.

Could you provide a working reproduction, this Codesandbox template might be a good starting point.

My guess is that you are passing a non-dayjs value to one of the pickers so our library fails to manipulate it.

[LukasTy]

Hello @thecowmilk
It looks like you are using @mui/x-date-pickers v6, based on the envinfo report, but your component usage is still left in the v5 style.
Please follow the migration guide first and report back if you are still having issues after that. 🙏

[thecowmilk]

Hello @thecowmilk It looks like you are using @mui/x-date-pickers v6, based on the envinfo report, but your component usage is still left in the v5 style. Please follow the migration guide first and report back if you are still having issues after that. 🙏

This is very true, now that I'm looking it was a 5.0.16 version. I will revert back to the original version for development purposes then I will take another time to update all the components. Thank You!

[ramazankayis]

hi,

<DesktopDatePicker
disablePast
className={flagdate && "border border-danger"}
label={t("Date")}
required
inputFormat="MM/DD/YYYY"
value={categorydate}
onChange={(e) => {
fnCategoryDate(e);
inputEvent(e);
}}
renderInput={(params) => <TextField {...params} name="date" />}
/>
{formErrors.date && (
{formErrors.date}
)}

          If you take the value here as dayjs(categorydate) it will work fine.

[hauhaann]

Thank you ramazankayis. You saved my day !