Customization

The TimePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child TimePicker components which are otherwise inaccessible.

The user can replace the following TimePicker components with custom ones:

  • DateInput—Renders the input field in the TimePicker.
  • Popup—Renders the Popup which contains the Calendar.

Customizing the DateInput

The TimePicker and the DateInput communicate through the DateInputChangeEvent. In order for the TimePicker to work correctly with any form of time selection, provide a fully working input which calls the onChange property.

The following example demonstrates how to replace the default DateInput component with three native <input /> elements. To enable the user only to change a property and not have full control over the rendered content, pass a modified DateInput.

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

import { TimePicker } from '@progress/kendo-react-dateinputs';
import { CustomDateInput } from './customDateInput.jsx';

class App extends React.Component {
    render() {
        return (
            <TimePicker
                dateInput={CustomDateInput}

                defaultValue={new Date()}
                width={180}
            />
        );
    }
}

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

Customizing the Popup

The Popup component inside the TimePicker acts as a container element with an absolute position. The TimePicker changes the show property on clicking the Toggle button or on blur. You can control show through the TimePicker.

The following example demonstrates how to further customize the Popup—the complete overriding of the Popup is also possible.

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

import { TimePicker } from '@progress/kendo-react-dateinputs';
import { CustomPopup } from './customPopup.jsx';

class App extends React.Component {
    render() {
        return (
            <div style={{ textAlign: 'center' }}>
                <TimePicker
                    popup={CustomPopup}
                />
            </div>
        );
    }
}

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