Date, Time and DateTime pickers display

[Greg]

Is there a way to have these controls always displayed rather than having them associated with a textbox and click?

[Hetali]

Hi Greg,

To help the community with a similar query, I will paste the solution that we discussed in the private thread here.

In order to show the Kendo UI DateTimePicker popup at all times, follow the steps below:

1. Use the preventDefault method in close event to prevent closing of the popup.
2. Use the toggle method to show the popup when the form loads.
3. Set the visibility of the .k-datetimepicker class to hidden to hide the input and the icon.

For example:

<kendo-datetimepicker
  #datetimepicker
  (close)="$event.preventDefault()"
>
</kendo-datetimepicker>

@ViewChild('datetimepicker') public datetimepicker;
ngAfterViewInit() {    
  setTimeout(() => {
    this.datetimepicker.toggle(true);
  });
}

.k-datetimepicker {
  visibility: hidden;
}

In this StackBlitz example, the DateTimePicker popup is shown at all times.

Using the same approach, I have also created StackBlitz examples with the Kendo UI DatePicker and the Kendo UI TimePicker.

I hope the examples help. Please write back in the private thread if you have any further queries.

Regards,
Hetali
Progress Telerik