CODEWITHSUNDEEP
typescriptmaterial-uistyled-componentsreact-tsxmui-x-date-picker
Lore
Lore

Reputation: 1

Can't type into Mui DatePicker

I'm using Mui's DatePicker, but I can't type into it, because the date ends up being wrong, I can only select. I wanted to be able to write in it too, because it's easier, but when I want to type the day 25, it ends up being 02/05 because when I write a single number it automatically redirects to the next field, that it's month. I wanted to fix it.

[Edited: In fact, I just realized that I'm not being able to write down the date in any kind of date picker, even the html input with the date type, does that has something to do with chrome, my computer, code or something else?]

My code is like this:

<StyledDate label={input.label} onChange={(e) => input.onChange(e)} />

The "StyledDate" is a styled-component of the Mui's DatePicker, that is like this:

export const StyledDate = styled(DatePicker)`
    & label {
      font-family: 'Euclid Circular A', sans-serif;
    }

    & label.Mui-focused {
        font-weight: 600;
        color: ${EColorPalette.JET};
        font-family: 'Euclid Circular A', sans-serif;
    }

    & .MuiOutlinedInput-root {
        & fieldset {
            border-color: ${EColorPalette.JET};
            border-width: 2px;
            border-radius: 5px;
        }
    
        &.Mui-focused fieldset {
            border-color: ${EColorPalette.JET};
        }

        & input {
            font-family: 'Euclid Circular A', sans-serif;
        }
    }
`

I tried looking into Mui's documentation, and it seems to already have this problem in the models on their site, but I couldn't find a solution to this.

Upvotes: 0

Views: 118

Answers (0)

Related Questions