Date Range and Time Picker Popup

[n/a]

We are using the date range popup and need to add the option pick a start and date time in the popup.

 

Is this possible?

 

See attached image.

 

 

[Svet]

Hi John,

Thank you for the provided screenshot.

Indeed, there isn't a built-in feature that would allow to achieve the requirement out-of-the-box. However, what could be done is to use the dateRangePopupTemplate and add the MultiViewCalendar component together with two DateInput components:

      <kendo-daterange-popup>
        <ng-template kendoDateRangePopupTemplate>
          <kendo-multiviewcalendar kendoDateRangeSelection>
          </kendo-multiviewcalendar>
          <div class="timepickers">
            <kendo-dateinput
              [format]="'hh:mm a'"
            >
            </kendo-dateinput>
            <kendo-dateinput
              [format]="'hh:mm a'"
            >
            </kendo-dateinput>
          </div>
        </ng-template>
      </kendo-daterange-popup>

Please check the following example demonstrating this approach:

https://stackblitz.com/edit/angular-9qpgkt-uy8tkt?file=app/app.component.ts

Indeed, the example should be further updated to combine the time of the first DateInput with the start date of the DateRange component and the time of the second DateInput with the end date respectively.

What else could be done is to use two TimePickers instead of the DateInputs, but that approach would show a popup out of another popup:

https://stackblitz.com/edit/angular-9qpgkt-3fkxbw?file=app/app.component.ts

Please check the suggestions and let me know in case I can provide any additional details or if further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik