1

I'm making a SPFx webpart and I've 3 date pickers. See images below.

  1. First I start with 3 empty date pickers (oké they looks good)

  2. Then I select a pick up date (no problems so far)

  3. Then I select a return date but when selecting a date, it clears the pick up date (here the bug starts).

  4. Same for when I select an event date, it clears the return date (here the bug happens again).

This is my code:

import { DayOfWeek, DatePicker } from 'office-ui-fabric-react';

export interface IMyComponentState {
    pickUpDate?: Date;
    returnDate?: Date;
    eventDate?: Date;
}

export class MyComponent extends React.Component<{}, IMyComponentState > {
    public render(): React.ReactElement<{}> {
        return (
            <div>
                <DatePicker
                    isRequired
                    label={strings.datePickUp}
                    key={"1"}
                    onSelectDate={pickUpDate => { this.setState({ pickUpDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />

                <DatePicker
                    label={strings.dateReturn}
                    key={"2"}
                    onSelectDate={returnDate => { this.setState({ returnDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />

                <DatePicker
                    isRequired
                    label={strings.dateEvent}
                    key={"3"}
                    onSelectDate={eventDate => { this.setState({ eventDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />
            </div>
        );
    }
}

See also this code pen

How could I solve the bug my component? I've debugged my code a lot but couldn't find the problem.

This are my debug results after step 3:

Like you can see the states are still correct.

3

It seems you are not setting any value to your components:

 <DatePicker
    isRequired
    label={strings.datePickUp}
    value={this.state.datePickup} //Add this
    key={"1"}
    onSelectDate={pickUpDate => { this.setState({ pickUpDate }); }}
    firstDayOfWeek={DayOfWeek.Monday} />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.