Controlled Mode

By default, the DateTimePicker is in an uncontrolled state.

The DateTimePicker provides options for:

Controlling the Value

To manage the date value of the DateTimePicker:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.

The following example demonstrates how to control the DateTimePicker value.

class App extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            value: new Date()
        }
    }
    handleChange = (event) => {
        this.setState({ value: event.target.value })
    }
    render() {
        return(
            <div className="row">
                <div className="example-config col-xs-12 col-md-12 example-col">
                    <p>The value is: {`${this.state.value}`}</p>
                </div>
                <div className="col-xs-12 col-md-12 example-col">
                    <p>Controlled DateTimePicker</p>
                    <DateTimePicker
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Controlling the Popup State

To manage the popup state of the DateTimePicker, set the displayed state of the component through its show property.

The following example demonstrates how to control the state of the date-time selector of the DateTimePicker upon display.

class App extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            show: false
        }
    }
    handleClick = (event) => {
        this.setState({ show: !this.state.show })
    }
    render() {
        return(
            <div className="row">
                <div className="col-xs-12 col-md-6 example-col">
                    <p>Controlled DateTimePicker</p>
                    <DateTimePicker
                        show={this.state.show}
                    />&nbsp;
                    <button className="k-button k-primary" onClick={this.handleClick}>Toggle</button>
                </div>
                <div className="col-xs-12 col-md-6 example-col">
                    <p>Always shown</p>
                    <DateTimePicker
                        show={true}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /