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

Declaratively initialize datetimepicker with data-role="datetimepicker"

4 Answers 300 Views

DatePicker

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

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

Accepted

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:

http://jsbin.com/UgiSECOY/2/edit

For more information please check the JavaScript dependencies page:

http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies

Regards,
Alexander Valchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!