Hi,
If you put twice or more times a DatePicker in a single <label> tag, then calendar popup for the second instance doesn't work, it hides immediately.
I'm aware of that it's not a good practice to put multiple inputs in a single label tag, but sometimes such things happends on a generic pages.
Sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="testAppCtrl">
Try to open the second date picker popup<br />
<label>
From <input kendo-date-picker ng-model="dataObj.dateFrom"/>
to <input kendo-date-picker ng-model="dataObj.dateTo" />
</label>
</div>
</div>
<script>
var testApp = angular.module('testApp', ["kendo.directives"]);
testApp.controller('testAppCtrl', ['$scope', function ($scope) {
$scope.dataObj = {
dateFrom:"2014-11-18T10:29:49.452Z",
dateTo:"2015-11-18T10:29:49.452Z"
}
}]);
</script>
</body>
</html>
If you put twice or more times a DatePicker in a single <label> tag, then calendar popup for the second instance doesn't work, it hides immediately.
I'm aware of that it's not a good practice to put multiple inputs in a single label tag, but sometimes such things happends on a generic pages.
Sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="testAppCtrl">
Try to open the second date picker popup<br />
<label>
From <input kendo-date-picker ng-model="dataObj.dateFrom"/>
to <input kendo-date-picker ng-model="dataObj.dateTo" />
</label>
</div>
</div>
<script>
var testApp = angular.module('testApp', ["kendo.directives"]);
testApp.controller('testAppCtrl', ['$scope', function ($scope) {
$scope.dataObj = {
dateFrom:"2014-11-18T10:29:49.452Z",
dateTo:"2015-11-18T10:29:49.452Z"
}
}]);
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hi Janusz,
The label browser implementation is to focus the first input element so the behavior that you describe is expected. Here is the working example:
http://dojo.telerik.com/EJEXA
Regards,
Kiril Nikolov
Telerik
The label browser implementation is to focus the first input element so the behavior that you describe is expected. Here is the working example:
http://dojo.telerik.com/EJEXA
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!