从 Angularjs UI 引导日期选择器中删除按钮

Question

从 Angularjs 的 UI Bootstrap 示例中，我设法使用以下代码创建了 UI 日期选择器。

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt" is-open="opened" ng-required="true"  />
          <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>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

现在我想摆脱日历按钮并在选择编辑框时启用弹出日历。如何替换这个 is-open="opened" 属性？

app.controller('createProjectController', ['$scope', function ($scope, $timeout) {

     $scope.project = {};
       $scope.clear = function () {
            $scope.project.dt = null;
        };
        $scope.open = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.opened = true;
        };

        $scope.format = 'dd.MM.yy';

        $scope.dateOptions = {
            formatYear: 'yy',
        };
    }]);

Answer 1

如果我正确理解了您的问题，并且您希望在单击输入字段时触发日期选择器，则需要在您的<input>元素中添加ng-click=open($event)。

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt" is-open="opened" ng-click="open($event)" ng-required="true"  />
  </p>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

See plunker

编辑

<div class="col-md-2">
 <p class="input-group">
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt1" is-open="opened['id1']" ng-click="open($event, 'id1')" ng-required="true"  />
  </p>
  <p>
    <input type="text" class="text-box input-large input-large-altered" name="HandOverToOwner" datepicker-popup="dd.MM.yyyy"  ng-model="project.dt2" is-open="opened['id2']" ng-click="open($event, 'id2')" ng-required="true"  />
  </p>
  <span class="help-block" ng-show="ProjectCreate.HandOverToOwner.$error.required">Required*</span>
</div>

在js文件中

$scope.opened = [] # initalize open as array somewhere in your controller

$scope.open = function ($event, id) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.opened[id] = true;
};

new plunker