CODEWITHSUNDEEP
material-ui
Eva Cohen
Eva Cohen

Reputation: 505

change date icon alignment from right (default) to left in material-ui-pickers 2.2.4

I'm using material-ui-pickers 2.2.4 Datepicker component. However, I would like the Date icon to be placed on the left side instead on the right side (default). any help?

tried custom css, to wrap the component with css, and all these hacky ways failed.

                <MuiPickersUtilsProvider utils={MomentUtils}>
                    <DatePicker 
                        readOnly
                        ref='datepicker'
                        labelFunc={this.formatWeekSelectLabel}
                        // value=""
                        onChange={this.handleDateChange}
                        animateYearScrolling
                        InputProps={{
                            disableUnderline: true,
                        }}      
                    />
                </MuiPickersUtilsProvider>
            </MuiThemeProvider>```

Upvotes: 3

Views: 4551

Answers (3)

Blomex
Blomex

Reputation: 427

since InputAdornmentProps is now removed, I did it in following way:

slotProps={{
    inputAdornment: {
      position: 'start',
    },
  }}

this is also consistent with documentation here

Upvotes: 1

gare_lambda
gare_lambda

Reputation: 11

Here is a simple use case of DatePicker v^6.10.2

In that version, a bunch of properties are either deprecated, or removed. For example, the InputAdornmentProps property won't work and the components is deprecated.

value={props.value}
onChange={props.onChange}
open={open}
disablePast
onClose={() => setOpen(false)}
disablePast
slotProps={{
    inputAdornment: {
        sx: {
            display: 'none',
        },
    },
    textField: {
        onClick: () => setOpen(true),
        InputProps: {
            startAdornment: (
                <img
                    className='mr-[8px] h-[14px] w-[14px]'
                    src={calendarGrayIcon}
                    alt='calendar'
                />
            ),
            classes: {
                root: styles.input.root,
                notchedOutline: styles.input.notchedOutline,
            },
        },
    },
}}
views={['year', 'month', 'day']}
className='w-full'

Upvotes: 1

Anar Ali
Anar Ali

Reputation: 586

               <DatePicker 
                    readOnly
                    ref='datepicker'
                    labelFunc={this.formatWeekSelectLabel}
                    // value=""
                    onChange={this.handleDateChange}
                    animateYearScrolling
                    InputProps={{
                        disableUnderline: true,
                    }}  
                    InputAdornmentProps={{ position: 'start' }}
                />

Upvotes: 8

Related Questions