Question

我想点击图片图标打开html5的日历弹出窗口。我正在使用angularjs。它的版本问题为ui-bootstrap-tpls。有人请尽快帮助我。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>
    <script>
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
       $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
        console.log($scope.dt);
      };

    });
    </script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Date output: <em>{{dt}}</em></pre>

    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="date" class="form-control" ng-model="dt" ng-required="true" />
              <input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
</div>
  </body>
</html>

Answer 1

我建议你尝试这样的事情。

        <span class="input-group-addon" id="ID">text</span>
        <input type="text" data-ng-model="MODEL"
        class="form-control" data-uib-datepicker-popup
        data-is-open="popup.opened" data-min-date="minDate"
        data-max-date="maxDate" data-datepicker-options="dateOptions"
        data-date-disabled="disabled(date, mode)" data-ng-required="true"
        data-close-text="Close" />
        <span class="input-group-btn">
        <button type="button" class="btn btn-default"
            data-ng-click="open()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
        </span>

让我知道它是否有效。你使用什么版本的角度Js，Datepicker和角度ui-bootstrap-tpls？

Answer 2

这可能对您的情况有所帮助。

Working fiddle :

fiddle link

Html 5日期选择器在事件触发器中打开和关闭

2 个答案: