[pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive

[ari-ishibashi]

Steps to reproduce

Link to live example: (required)

Steps: 1.Show Date Picker 2.Select a date on the popup calendar 3.

Current behavior

The calendar popup does not display the next month arrow so that the user cannot click to advance to the next month. The popup calendar does not display the selected month and year at the top. The version of MUI X I'm using is v7.12.0

Expected behavior

The calendar popup should be fully displayed and the next arrow should be responsive to user clicks, allowing the user to navigate to the next month.　Additionally, the names of the selected month and year should be displayed at the top of the calendar popup.

Context

No response

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: DatePicker

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[ari-ishibashi]

Sorry for the late reply. I'm sending a reproduction test case below. Please let me know if there is anything missing.

import * as React from 'react';
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

  <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Box >
        <DatePicker
          label="日付"
          value={selectedDate}
          onChange={(newDate) => setSelectedDate(newDate)}
        />
       </Box>
  </LocalizationProvider>

That is all. Best regards.

[LukasTy]

@ari-ishibashi could you provide a live reproduction example? Given your code example, the DatePicker behaves as expected. 🤔

If you are trying to make the Picker Calendar responsive, then you are on your own, that is not something we support or endorse, same as Material Design—the calendar width is specified in fixed size for usability and layout stability.

[ari-ishibashi]

Thank you for your reply. I had the above problem when I incorporated this minimal code into my app. I contacted you to ask for a fix.

[LukasTy]

Thank you for your reply. I had the above problem when I incorporated this minimal code into my app. I contacted you to ask for a fix.

Sorry, but without a reproduction example, we cannot help you. It looks like some of your app styling code might be causing this behavior. 🤔

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.