reactjstypescriptmaterial-uidatepickermui-x-date-picker

I'm using @mui/x-date-pickers 6.10.0. I would like to know how to change the color and format of a specific part of that library

I'm using @mui/x-date-pickers 6.10.0. I want to change the color and format of a specific part in the mobile environment. What should I do?

I would like to format the part shown in the image below as May 31st. Is there a way to do this?

enter image description here

the code is below

<DatePicker
 value={dateInfo?.stateDate}
 label="시작 날짜를 선택해주세요"
 format="YYYY-MM-DD"
 slotProps={{
 textField: {
  size: 'small',
 },
 day: {
  sx: datePickerDayStyle,
 },
}}
 className={input.dataPicker}
/>

The style part is as follows;

 dataPicker: {
    width: '100%',
    borderRadius: '4px',
    backgroundColor: '#fff',
    'button[class*="materialui-daterange-picker-makeStyles-outlined"]': {
      // today
      borderColor: '#000',
    },
    'button[class*="materialui-daterange-picker-makeStyles-filled"]': {
      // selected date
      backgroundColor: '#000',
    },
    '& .MuiPickersDay-dayDisabled': {
      color: '#bbb',
    },
    '& .MuiTypography-root': {
      fontWeight: 'normal',
    },
    '& .MuiOutlinedInput-root': {
      '&.Mui-focused fieldset': {
        borderWidth: '1px',
        borderColor:
          theme.palette.mode === 'dark'
            ? DarkTheme.borderColor
            : LightTheme.borderColor,
      },
      '& .MuiInputBase-input': {
        padding: '0 16px',
        height: '33px',
        color:
          theme.palette.mode === 'dark'
            ? DarkTheme.fontColor
            : LightTheme.fontColor,
        fontSize: '13px',
        fontFamily: 'SpoqaHanSansNeo-Regular',
      },
    },
    '& .MuiFormLabel-root': {
      color:
        theme.palette.mode === 'dark'
          ? DarkTheme.borderColor
          : LightTheme.borderColor,
      fontSize: '12px',
      fontFamily: 'SpoqaHanSansNeo-Regular',
    },
    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor:
        theme.palette.mode === 'dark'
          ? DarkTheme.borderColor
          : LightTheme.borderColor,
    },
    '& .MuiInputLabel-outlined.Mui-focused': {
      transform: 'translate(14px, -10px) scale(0.75)',
      color:
        theme.palette.mode === 'dark'
          ? DarkTheme.fontColor
          : LightTheme.fontColor,
      backgroundColor: 'transparent',

      padding: '0 2px 0 2px',
    },
    '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
      borderColor:
        theme.palette.mode === 'dark'
          ? DarkTheme.borderColor
          : LightTheme.borderColor,
    },
  }

Additionally, datePickerDayStyle is as follows.

export const datePickerDayStyle = {
  '&.MuiPickersDay-root.Mui-selected': {
    backgroundColor: LGTheme[0],
  },
  ':not(.Mui-selected)': {
    backgroundColor: '#fff',
    borderColor: LGTheme[0],
  },
  '&:hover': {
    backgroundColor: LGTheme[10],
    borderColor: LGTheme[10],
    transition: 'all 0.5s ease',
  },
  '&.Mui-selected': {
    color: '#fff',
    backgroundColor: LGTheme[0],
    borderColor: LGTheme[0],
    '&:hover': {
      color: '#fff',
      backgroundColor: LGTheme[0],
      borderColor: LGTheme[0],
      transition: 'all 0.5s ease',
    },
  },
};

Additionally, I would like to change the color of the part displayed in the image below, so please help. I am asking this question because I am not sure if my search method is wrong. Thank you in advance.

enter image description here

Solution

  • My questions are resolved and answered by me. I'll post the code for my solution in case someone needs it. The solution was to use slotProps in the DatePicker component. This is the code below.

    
export const datePickerSlotProps = {
  day: {
    sx: {
      '&.MuiPickersDay-root.Mui-selected': {
        backgroundColor: LGTheme[0],
      },
      ':not(.Mui-selected)': {
        backgroundColor: '#fff',
        borderColor: LGTheme[0],
      },
      '&:hover': {
        backgroundColor: LGTheme[10],
        borderColor: LGTheme[10],
        transition: 'all 0.5s ease',
      },
      '&.Mui-selected': {
        color: '#fff',
        backgroundColor: LGTheme[0],
        borderColor: LGTheme[0],
        '&:hover': {
          color: '#fff',
          backgroundColor: LGTheme[0],
          borderColor: LGTheme[0],
          transition: 'all 0.5s ease',
        },
      },
    },
  },
  desktopPaper: {
    sx: {
      '.MuiPickersYear-yearButton.Mui-selected': {
        color: '#fff',
        backgroundColor: LGTheme[0],
      },
      '.MuiPickersMonth-monthButton.Mui-selected': {
        color: '#fff',
        backgroundColor: LGTheme[0],
      },
    },
  },
  mobilePaper: {
    sx: {
      '.MuiPickersYear-yearButton.Mui-selected': {
        color: '#fff',
        backgroundColor: LGTheme[0],
      },
      '.MuiPickersMonth-monthButton.Mui-selected': {
        color: '#fff',
        backgroundColor: LGTheme[0],
      },
    },
  },
  toolbar: {
    toolbarFormat: 'MM월DD일',
  },
  actionBar: {
    sx: {
      '& button': {
        color: 'black',
      },
    },
  },
};

      <DatePicker
    label="종료 날짜를 선택해주세요"
    value={infoSearchData.endDate}
    format="YYYY-MM-DD"
    className={input.dataPicker}
    views={['year', 'month', 'day']}
    slotProps={{
      ...datePickerSlotProps,
      textField: {
        size: 'small',
      },
    }}>

    In the desktopPaper section, the color of the buttons for the year and month of the selected section was changed. We solved the problem of displaying the date in the toolbar section. The colors of the buttons below have been changed at once. I haven't found a way to change the colors of each button yet. Thank you to everyone who watched.