1

Having issues using the DatePicker control and fixing width for my SPFX app. The default width is 100%. I want it to be the same width as my text input, which I pass in a 700px width property into the styles parameter. There is no width or styles parameter I can pass in a prop to on the DatePicker component.

            <DatePicker label="Due Date"
                    value={this.state.Due_x0020_Date? new Date(): null}
                    onSelectDate = {(date: Date | null | undefined): void => {
                        this.state.Due_x0020_Date=date;  }}
                    disabled={this.state.mode === 'edit' ? true : false }
                    
        />
longieng-myo
  • 41
  • 3

1 Answers1

0

Try this:

<DatePicker styles={{ root: {width: 700} }} />

Tested on Fluent 8.49.1.

I suppose that your original code was missing the root key.

Citing docs:

styles prop

A component consists of DOM elements, or "areas." Each of the areas should be targetable for styling.

To find the available areas for a component, use intellisense or look at the IComponentStyles interface in the component's Component.types.ts file (substituting the actual component name for "Component").

Further reading - https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots.

MartinT
  • 590
  • 5
  • 21