以编程方式打开angular-strap日期选择器

Question

我正在使用AngularJS 1.2.12和angular-strap 2.0.0-rc.2 (mgcrea.github.io/angular-strap/)，但我无法找到一种在控制器中打开日期选择器/时间选择器小部件的方法。我想使用一个带有日历图标按钮的输入组，像这样：

<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函数并从我的控制器中打开日历。但我不知道如何做到这一点。有什么想法吗？

- xJREB

---

他们有手动打开选项，因此您可能需要编写一个函数来打开日期选择器，并将其设置为您的ng-click，以及在需要使用$datepicker.show从代码中打开它时。我没有检查过，但您可以使用他们的源代码作为参考：https://github.com/mgcrea/angular-strap/blob/master/src/datepicker/datepicker.js - Vova Lando

有解决方案，只需使用他们的代码进行检查。 - Vova Lando

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>

- Jeff Sheets

---

非常优雅的解决方案！ - Mikhail

太棒了！我已经寻找好的解决方案很久了。谢谢 :-) - DenisH

Answer 2

文档介绍了如何以编程方式打开日期选择器，但没有简单的方法来获取已绑定到元素的日期选择器的引用。

在我正在工作的项目中，我有一个日期选择器指令，几乎完全包装了您的HTML，并将其包装成 myDatepicker 指令。在该指令内部，绑定到<button>元素的ng-click方法本质上是：

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

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

由于angular-strap已经重写以摆脱任何bootstrap.js依赖，因此引入了许多错误和奇怪的问题。我正在升级我的项目代码库到较新版本的angular-strap，并且我觉得选择UI Bootstrap可能会是一个更好的选择，因为它的代码库更加成熟。

- jkjustjoshing

---

啊，我也不得不这样做。创建了一个问题，但还没有收到反馈。 - amcdnl