Integration with JSON

Generally, the data which is received from the server is serialized in a JSON format.

The date object in JSON is an ISO8601-formatted date string. For more details, refer to the documentation on the JSON.stringify method. On the other hand, the DateTimePicker works only with JavaScript Date instances.

To bind the DateTimePicker to dates which are serialized as strings, handle the parsing process:

  1. Convert the JSON date strings into valid JavaScript Date objects by using the IntlService or any other suitable Date parser.
  2. Define the value property of the component.
  3. Provide an onChange event handler to the DateTimePicker to get the selected Date value.

The following example demonstrates how to set the value of the DateTimePicker.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { DateTimePicker } from '@progress/kendo-react-dateinputs';
import { provideIntlService } from '@progress/kendo-react-intl';

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

        const data = JSON.parse('{ "birthDate": "2017-06-27 14:30" }');

        const model = {
            birthDate: provideIntlService(this).parseDate(data.birthDate, 'yyyy-MM-dd HH:mm')
        };

        this.state = {
            model: model
        };
    }
    handleChange = (event) => {
        this.setState({ model: { birthDate: event.target.value } });
    }
    render() {
        return (
            <div>
                <div className="example-config">
                    <p>Model: {JSON.stringify(this.state.model)}</p>
                    <p>DateTimePicker value: {`${this.state.model.birthDate}`}</p>
                </div>
                <label>
                    Select Birthdate:
                    <DateTimePicker
                        width={300}
                        value={this.state.model.birthDate}
                        onChange={this.handleChange}
                    />
                </label>
            </div>
        );
    }

}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /