Script Files for DateTimePicker

4 posts, 0 answers
  1. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 25 Jun Link to this post

    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

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2020 posts

    Posted 27 Jun Link to this post

    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.


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


    Let me know how your application works after the changes. 


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Morten
    Morten avatar
    331 posts
    Member since:
    Jul 2012

    Posted 27 Jun in reply to Viktor Tachev Link to this post

    Thanks Viktor,

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

    Best regards Morten

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2020 posts

    Posted 29 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top