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

Template multiple date pickers

2 Answers 294 Views

DatePicker

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

Todd asked on 26 Apr 2016, 04:01 PM

So I edited the demo to reproduce the issue I am having. When there are 2 date pickers in the same template and they are both grabbing their data from the given object the second datepicker is not rendered. Am I doing something incorrectly here?

Important Stuff:

<div>

<h4>Choose a date</h4>

<div data-template="date-control-template" data-bind="source: Data"></div>

</div>

<script id="date-control-template" type="text/x-kendo-template">

<input data-role="datepicker"

data-bind="value: selectedDate"

style="width: 100%">

<input data-role="datepicker"

data-bind="value: selectedDate2"

style="width: 100%">

</script>

<script>

var viewModel = kendo.observable({

Data:{

selectedDate: null,

selectedDate2: null

},

isEnabled: true,

isVisible: true,

onChange: function() {

kendoConsole.log("event :: change (" + kendo.toString(this.get("selectedDate"), "D") + ")");

}

});

kendo.bind($("#example"), viewModel);

</script>

Full Page:

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/datepicker/mvvm">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.metro.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">

<script src="../content/shared/js/console.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<div>

<h4>Choose a date</h4>

<div data-template="date-control-template" data-bind="source: Data"></div>

</div>

<div style="padding-top: 2em;">

<h4>Console</h4>

<div class="console"></div>

</div>

<div class="box">

<div class="box-col">

<h4>Configuration</h4>

<div>

<label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>

</div>

<div>

<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>

</div>

<div class="box-col">

<h4>Information</h4>

Kendo UI DatePicker supports the

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/enabled">enabled</a>,

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/value">value</a> and

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.

</div>

<script id="date-control-template" type="text/x-kendo-template">

<input data-role="datepicker"

data-bind="value: selectedDate"

style="width: 100%">

<input data-role="datepicker"

data-bind="value: selectedDate2"

style="width: 100%">

</script>

<script>

var viewModel = kendo.observable({

Data:{

selectedDate: null,

selectedDate2: null

},

isEnabled: true,

isVisible: true,

onChange: function() {

kendoConsole.log("event :: change (" + kendo.toString(this.get("selectedDate"), "D") + ")");

}

});

kendo.bind($("#example"), viewModel);

</script>

</div>

</body>

</html>

2 Answers, 1 is accepted

answered on 26 Apr 2016, 06:49 PM

So I nailed it down as to what was the issue. The template must be wrapped in a single element.

<script id="date-control-template" type="text/x-kendo-template">

<div>

<input data-role="datepicker"

data-bind="value: selectedDate"

style="width: 100%">

<input data-role="datepicker"

data-bind="value: selectedDate2"

style="width: 100%">

</div>

</script>