Declaratively initialize datetimepicker with data-role="datetimepicker"

5 posts, 1 answers
  1. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 28 Jan 2014 Link to this post

    I want to declaratively add a datetimepicker.

    This is how I add one now:
    <!DOCTYPE html>
    <html>
    <head>
        <title>datetimepicker test</title>
     
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.web.js"></script>
        <script src="js/kendo.mobile.js"></script>
        <script src="js/cultures/kendo.culture.sv-SE.js"></script>
     
        <link href="css/kendo.mobile.flat.css" rel="stylesheet" />
        <link href="css/kendo.common.css" rel="stylesheet" />
        <link href="css/kendo.default.css" rel="stylesheet" />
     
        <script>
            var app = new kendo.mobile.Application(document.body,
            {
                skin: 'flat',
                initial: '#test'
            });
     
            window.kendoMobileApplication = app;
     
            $(function()
            {
                $("#datetimepicker").kendoDateTimePicker({ value: new Date() });
            });
     
        </script>
    </head>
    <body>
        <div id="test" data-role="view">
            <input id="datetimepicker">
        </div>
    </body>
    </html>


    This is how I want to add one:
    <!DOCTYPE html>
    <html>
    <head>
        <title>datetimepicker test 2</title>
     
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.web.js"></script>
        <script src="js/kendo.mobile.js"></script>
        <script src="js/cultures/kendo.culture.sv-SE.js"></script>
     
        <link href="css/kendo.mobile.flat.css" rel="stylesheet" />
        <link href="css/kendo.common.css" rel="stylesheet" />
        <link href="css/kendo.default.css" rel="stylesheet" />
     
        <script>
            var app = new kendo.mobile.Application(document.body,
            {
                skin: 'flat',
                initial: '#test'
            });
     
            window.kendoMobileApplication = app;
        </script>
    </head>
    <body>
        <div id="test" data-role="view">
            <input id="datetimepicker" data-role="datetimepicker">
        </div>
    </body>
    </html>

    However, no picker is initialized.

    Shouldn't there be at least one example on how to do this on api reference pages?

  2. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 28 Jan 2014 in reply to 100% Link to this post

    I am sorry that I maybe sounded harsh.
    I really want some guidance on however I am able to use data-role="datetimepicker".

    If I could edit my post to not say "at least one way", I would do it.
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Jan 2014 Link to this post

    Hello,

    The problem which you experienced is connected with the resources included on the page. Please note that only one of the combined JavaScript files can be included at a time, because they contain some shared scripts. If widgets from different Kendo UI suites (in your case Kendo Web and Kendo Mobile) will be used simultaneously, the developer should either use kendo.all.min.js or create a custom combined JavaSript file via the custom download builder tool.

    Your code works as expected with kendo.all.min.js. For your convenience I prepared a sample page:

    For more information please check the JavaScript dependencies page:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. JOHNY
    JOHNY avatar
    9 posts
    Member since:
    Oct 2012

    Posted 14 Feb 2014 Link to this post

    Hey I have tried the following code, with data-role for datetime picker 
    Please see the demo at
    http://jsbin.com/tupof/1
    It is not working with declarative syntax
  6. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 15 Feb 2014 in reply to JOHNY Link to this post

    JOHNY said:Hey I have tried the following code, with data-role for datetime picker 
    Please see the demo at
    http://jsbin.com/tupof/1
    It is not working with declarative syntax
    In order to use declarative initialization you will have to call kendo.init or kendo.bind. I have updated the JSBin.
Back to Top
Kendo UI is VS 2017 Ready