6

我正在使用 AngularJS 1.2.12 和 angular-strap 2.0.0-rc.2 (mgcrea.github.io/angular-strap/)，但我找不到从控制器内打开 datepicker/timepicker 小部件的方法。我想使用带有这样的日历图标按钮的输入组：

<div class="input-group">
    <input class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>

我现在可以轻松地为按钮提供 ng-click 功能并从我的控制器打开日历。我只是找不到如何做到这一点的方法。有任何想法吗？

4

2 回答 2

16

另一种解决方案是将按钮更改为标签，并使用“for”属性。我喜欢它，因为它消除了打开日期选择器的额外 javascript，并且当使用 tab 键时，光标不会再停在图标上。

<div class="input-group">
    <input id="createdDate" name="createdDate" class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
    <span class="input-group-btn">
        <label class="btn btn-default" for="createdDate">
        <i class="glyphicon glyphicon-calendar"></i></label>
    </span>
</div>
于 2014-10-27T17:07:42.913 回答
5

该文档讨论了以编程方式打开日期选择器，但它没有提供一种简单的方法来获取对已经绑定到元素的日期选择器的引用。

在我正在处理的一个项目中，我有一个 datepicker 指令，它几乎完全将您拥有的 HTML 包装到myDatepicker指令中。在该指令内，ng-click绑定到<button>元素的方法本质上是：

scope.openDatepicker = function() {
  element.children('input').focus();
}

这对我来说足够好。



由于 angular-strap 已被重写以摆脱任何 bootstrap.js 依赖项，因此引入了许多错误和奇怪的东西。我正在努力将我的项目的代码库升级到较新版本的 angular-strap，我觉得使用UI Bootstrap会是一个更好的选择，因为它的代码库更成熟一些。

于 2014-06-26T11:17:33.977 回答