DatePicker - calendar popup for the second instance immediately hides itself

2 posts, 0 answers
  1. Janusz
    Janusz avatar
    12 posts
    Member since:
    Jul 2012

    Posted 18 Nov 2014 Link to this post

    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>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 20 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top