Script Files for DateTimePicker

[Morten]

Hi support,

on a page (asp.net mvc 461) where first load is critical (and where I just need the kendo datetimepicker) I'm trying to "just include the required kendo.xxx.min.js files" (instead of just including kendo.all.min.js) (using the Audit tab in Chrome I'm told that the change reduces the load time from 11 sec to less than 3 sec). 

From this page https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors I setup my bundle like this:

    bundles.Add(
        new ScriptBundle("~/bundles/minimalJs")
            .Include("~/Scripts/jquery-3.3.1.min.js")
            .Include("~/Scripts/bootstrap.min.js")
            .Include("~/Scripts/kendo/kendo.core.min.js")
            .Include("~/Scripts/kendo/kendo.data.min.js")
            .Include("~/Scripts/kendo/kendo.binder.min.js")
            // req for datetimepicker (see https://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors)
            .Include("~/Scripts/kendo/kendo.userevents.min.js")
            .Include("~/Scripts/kendo/kendo.selectable.min.js")
            .Include("~/Scripts/kendo/kendo.calendar.min.js")
            .Include("~/Scripts/kendo/kendo.popup.min.js")
            .Include("~/Scripts/kendo/kendo.datepicker.min.js")
            .Include("~/Scripts/kendo/kendo.timepicker.min.js")
            .Include("~/Scripts/kendo/kendo.datetimepicker.min.js")
            .Include("~/Scripts/moment.min.js") // todo consider moving to view
            .Include("~/Scripts/fingerprint2.min.js") // todo consider moving to view
            .Include("~/Scripts/minimal.js")
        );

In my view I do this:

<input id="datetimepicker" />

$("#datetimepicker").kendoDateTimePicker({
  value: new Date()
});

The input element does not, however, render into a kendoui datetimepicker (see screenshot date-time-picker-1.png)

NB if I use the example from https://demos.telerik.com/kendo-ui/datetimepicker/index and initialize using the option dateInput: true I'm getting the following error:Uncaught TypeError: k.DateInput is not a constructor

I have also prepared an example the illustrate my issue: https://dojo.telerik.com/UXEbUMiY/3

What files must I include as a minimum to be able to use the kendo ui datetimepicker?

Thanks in advance.

Best regards

Morten

 

 

[Viktor Tachev]

Hi Morten,

The picker components are using kendo.Popup internally to display the Calendar widget for selecting a date/time. It seems that the scripts for the Popup widget are not referenced in the dojo and that is why an error is thrown.

Additionally, if you would like to use DateInput in the picker it is necessary to include the scripts for it as well. 

For your convenience I have updated the dojo example with the required scripts and it is working as expected on my end.

• https://dojo.telerik.com/UXEbUMiY/6

The only change I made was to add the following two lines and uncomment the dateInput setting for DateTimePicker.

<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.popup.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.dateinput.min.js"></script>

Let me know how your application works after the changes. 


Regards,
Viktor Tachev
Progress Telerik

[Morten]

Thanks Viktor,

I missed kendo.dateinput.min.js and all kendo bootstrap css. My mistake.

Best regards Morten

[Viktor Tachev]

Hello Morten,

I am glad to hear that the issue was resolved. In case you have additional queries regarding our components do not hesitate to contact us again.

Regards,
Viktor Tachev
Progress Telerik