Components / Date Inputs / DateTimePicker

Calendar Options

The DateTimePicker enables you to configure its popup Calendar.

Focused Dates

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

@Component({
    selector: 'my-app',
    template: `
        <kendo-datetimepicker
            [focusedDate]="focusedDate"
        >
        </kendo-datetimepicker>
    `
})
class AppComponent {
    public focusedDate: Date = new Date(2019, 5, 1);
}

Week Number Column

In the Calendar, you can render a column which displays the number of the weeks within the current month view. To show the week number column, set the weekNumber property.

@Component({
    selector: 'my-app',
    template: `
       <kendo-datetimepicker
            [weekNumber]="true"
        >
        </kendo-datetimepicker>
    `
})
class AppComponent { }

In this article