以编程方式打开角带日期选择器

Question

我正在使用 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 功能并从我的控制器打开日历。我只是找不到如何做到这一点的方法。有什么想法吗？

Answer 1

另一种解决方案是将按钮更改为标签，并使用'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>

Answer 2

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

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

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

这对我来说已经足够好了。

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