This is a migrated thread and some comments may be shown as answers.

Declaratively initialize datetimepicker with data-role="datetimepicker"

4 Answers 142 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
100%
Top achievements
Rank 1
100% asked on 28 Jan 2014, 10:02 AM
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?

4 Answers, 1 is accepted

Sort by
0
100%
Top achievements
Rank 1
answered on 28 Jan 2014, 10:32 AM
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.
0
Accepted
Alexander Valchev
Telerik team
answered on 28 Jan 2014, 05:18 PM
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!
0
JOHNY
Top achievements
Rank 1
answered on 14 Feb 2014, 08:54 PM
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
0
Holger
Top achievements
Rank 1
answered on 15 Feb 2014, 07:08 PM
[quote]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[/quote]In order to use declarative initialization you will have to call kendo.init or kendo.bind. I have updated the JSBin.
Tags
Date/Time Pickers
Asked by
100%
Top achievements
Rank 1
Answers by
100%
Top achievements
Rank 1
Alexander Valchev
Telerik team
JOHNY
Top achievements
Rank 1
Holger
Top achievements
Rank 1
Share this question
or