Placeholders

For its input field, the TimePicker enables you to provide descriptions for the format sections.

Setting the Description of the Format Sections

The formatPlaceholder option enables you to set the way the format sections of the input field are rendered. For example, whether the month input is prompted as month or MM.

The formatPlaceholder provides the following available options which you can set:

  • 'wide'—Displays the full description of the format section. For example, turns MM into month. Retrieved from CLDR.
  • 'narrow'—Displays the narrow description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'short'—Displays the short description of the format section. For example, turns MM into mo.. Retrieved from CLDR.
  • 'formatPattern'—Directly displays the format section. For example, turns MM into MM.
  • CustomFormatPlaceholder—An object that defines the description of the format sections. For example, { day: 'd.', month: 'M.', year: 'y', hour: 'h.' }.
class App extends React.Component {
    render() {
        return(
            <div className="row example-wrapper" style={{minHeight: '450px'}}>
                <div className="col-xs-12 col-md-6 example-col">
                    <p>Full-length format description:</p>
                    <TimePicker formatPlaceholder="wide"/>
                </div>

                <div className="col-xs-12 col-md-6 example-col">
                    <p>Narrow-length format description:</p>
                    <TimePicker formatPlaceholder="narrow"/>
                </div>

                <div className="col-xs-12 col-md-6 example-col">
                    <p>Short-length format description:</p>
                    <TimePicker formatPlaceholder="short"/>
                </div>

                <div className="col-xs-12 col-md-6 example-col">
                    <p>Display defined format:</p>
                    <TimePicker format="HH:mm:ss" formatPlaceholder="formatPattern"/>
                </div>

                <div className="col-xs-12 col-md-6 example-col">
                    <p>Custom defined format descriptions</p>
                    <TimePicker format="HH:mm:ss"
                        formatPlaceholder={{ hour: 'h', minute: 'm', second: 's' }}/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article