Question: Clearing input values on Time picker

[williejay2017]

This more of a question than an actual issue. Is there a way to clear the time inputs without using the clear icon? I would like the time picker to reset when my components general reset button is pressed but as it stands now I haven't figured a way to clear the value from the time picker without using the built in clear button.

Thanks.

[emilyuhde]

Did you try setting the value to null on press of your button? That seems to be all that the clear button in this component is doing.

https://github.com/wojtekmaj/react-time-picker/blob/master/src/TimePicker.jsx#L107

[williejay2017]

Did you try setting the value to null on press of your button? That seems to be all that the clear button in this component is doing.

I have, and the time picker input still does not clear. Seems the only way to clear is with the clear button itself.

[emilyuhde]

I tried it and it seemed to work for me just fine. Here's my class code, maybe it'll help you. I included some screenshots of the before and after clicking the Reset button (the styling is heavily customized for my project, but functionality is the same.)

class TimePickerExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time: '13:00',
            invalid: null,
        };
    }

    onChange = time => this.setState({ time })
    isInvalid = invalid => this.setState({ invalid })

    handleClick = () => {
        this.setState({ time: null });
    };

    render() {
        const { classes, } = this.props;

        return (
            <div>
                <Typography variant="h2" gutterBottom>
                    TimePicker Component
                </Typography>
                <Typography gutterBottom>
                    In this example, the <code>timeIncrement</code> prop has been set to 5, which will cause the up and down arrow buttons to increment or decrement the time by 5 minutes per click.
                </Typography>
                <Button
                    onClick={this.handleClick}>Reset</Button>
                <TimePicker
                    onChange={this.onChange}
                    isInvalid={this.isInvalid}
                    value={this.state.time}
                    error={this.state.invalid}
                    timeIncrement={5}
                    locale="en-US"
                    helperText="Times before 11 am work best"
                    label="Time" />
                <Typography className={classes.sectionHeaders}>The selected time is: {this.state.time}</Typography>
                {this.state.invalid &&
                    <Typography className={classes.sectionHeaders}>The value in the TimePicker is invalid. Choose a valid time before trying to submit the form.</Typography>
                }
            </div>
        );
    }
}

[williejay2017]

I tried it and it seemed to work for me just fine. Here's my class code, maybe it'll help you. I included some screenshots of the before and after clicking the Reset button (the styling is heavily customized for my project, but functionality is the same.)

class TimePickerExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            time: '13:00',
            invalid: null,
        };
    }

    onChange = time => this.setState({ time })
    isInvalid = invalid => this.setState({ invalid })

    handleClick = () => {
        this.setState({ time: null });
    };

    render() {
        const { classes, } = this.props;

        return (
            <div>
                <Typography variant="h2" gutterBottom>
                    TimePicker Component
                </Typography>
                <Typography gutterBottom>
                    In this example, the <code>timeIncrement</code> prop has been set to 5, which will cause the up and down arrow buttons to increment or decrement the time by 5 minutes per click.
                </Typography>
                <Button
                    onClick={this.handleClick}>Reset</Button>
                <TimePicker
                    onChange={this.onChange}
                    isInvalid={this.isInvalid}
                    value={this.state.time}
                    error={this.state.invalid}
                    timeIncrement={5}
                    locale="en-US"
                    helperText="Times before 11 am work best"
                    label="Time" />
                <Typography className={classes.sectionHeaders}>The selected time is: {this.state.time}</Typography>
                {this.state.invalid &&
                    <Typography className={classes.sectionHeaders}>The value in the TimePicker is invalid. Choose a valid time before trying to submit the form.</Typography>
                }
            </div>
        );
    }
}

Ahhh I see the problem , thanks a bunch! I'll close this.