Placeholders

For its input field, the DateTimePicker enables you to render a text hint and to provide descriptions for the format sections.

Text Hints

When the value of the DateTimePicker is null, you can specify a text hint for its input field by setting the placeholder option of the component.

@Component({
    selector: 'my-app',
    template: `
        <kendo-datetimepicker
            [placeholder]="'Match start...'"
        >
        </kendo-datetimepicker>
    `
})

class AppComponent { }

Floating Labels

You can specify a floating label for the input field by wrapping the DateTimePicker into a kendo-textbox-container element and setting its floatingLabel attribute property to a string. The placeholder property of the DateTimePicker must also be set to an empty string so that the default DateInput mask will not be displayed.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Floating label:</p>
            <kendo-textbox-container floatingLabel="Match start...">
                <kendo-datetimepicker
                    [placeholder]="''"
                    [(ngModel)]="value"
                >
                </kendo-datetimepicker>
            </kendo-textbox-container>
        </div>
    `
})

class AppComponent {
    public value: Date;
}

Format Sections Description

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.', minute: 'm.', second: 's.' }.
@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Full-length format description:</p>
            <kendo-datetimepicker
                [formatPlaceholder]="'wide'"
            >
            </kendo-datetimepicker>
            <hr />

            <p>Short-length format description:</p>
            <kendo-datetimepicker
                [formatPlaceholder]="'short'"
            >
            </kendo-datetimepicker>
            <hr />

            <p>Custom defined format descriptions</p>
            <kendo-datetimepicker
                [format]="format"
                [formatPlaceholder]="formatPlaceholder"
            >
            </kendo-datetimepicker>
        </div>
    `
})

class AppComponent {
    public format: string = 'dd-MM-yyyy HH:mm:ss';
    public formatPlaceholder: DateInputCustomFormatPlaceholder = {
        day: 'd.',
        month: 'M.',
        year: 'y.',
        hour: 'h.',
        minute: 'm.',
        second: 's.'
    };
}

In this article