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

另一个解决方案是将按钮更改为标签，并使用＆＃39; for＆＃39;属性。我喜欢它，因为它消除了额外的javascript以打开日期选择器，并且当标记光标不再停止在图标上时。

<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，但它没有提供一种简单的方法来获取对已经绑定到元素的日期选择器的引用。

在我正在研究的项目中，我有一个datepicker指令，它几乎完全包含了你在myDatepicker指令中的HTML。在该指令中，绑定到ng-click元素的<button>方法基本上是：

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

对我来说效果很好。

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

以编程方式打开角带datepicker

2 个答案: