带有角度指令的可点击 bootstrap-datepicker 图标答案

【问题标题】：clickable bootstrap-datepicker icon with angular directive带有角度指令的可点击 bootstrap-datepicker 图标
【发布时间】：2013-08-02 08:24:05
【问题描述】：

我正在使用 angularjs，我希望在单击日历图标后显示我的 bootstrap-datepicker。
现在是这样的：

<div class="input-append date datepicker">
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span>
</div>

b-datepicker 是自定义指令。单击文本字段显示日期选择器，但图标单击不起作用。
来源：http://jsfiddle.net/cPVDn/

我的目标是这样的：
http://jsfiddle.net/6QnMB/

感谢您的帮助

更新：
这是解决方案：
http://jsfiddle.net/cPVDn/53/

【问题讨论】：

请将您的编辑作为答案发布

标签： twitter-bootstrap angularjs directive datepicker

【解决方案1】：

查看 AngularStrap 提供的可以解决您问题的优秀插件：link。

.config(function($datepickerProvider) {
  angular.extend($datepickerProvider.defaults, {
    dateFormat: 'dd/MM/yyyy',
    startWeek: 1
  });
})

HTML

<input type="text"
    class="form-control"
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd"
    data-date-type="number" 
    data-min-date="02/10/86"
    data-max-date="today"
    data-autoclose="1" 
    name="date2"
    bs-datepicker>

查看演示Plunker

这是他们的main page

【讨论】：

我在我的项目中使用了 angular-bootstrap，我不想将这两者混合，但在您的建议之后，我研究了来源并提出了解决方案。谢谢！
这个答案不是最好的。问题更新的答案是真正的最佳答案。它只是使用一个指令。我认为在此页面中提供该解决方案会很好。
@hiphip 对，他在 10 个月后发布了编辑。但他仍然使用bootstrap-datepicker插件
@MaximShoustin，问题中提到了 bootstrap-datepicker。比 UPDATE 中的解决方案只需要添加一个自定义的“b-datepicker”指令。当然，这是一个不同的解决方案（因此最好将其作为答案），对我来说这是最好的。你的是使用 AngularStrap 库的替代解决方案，没关系。
@hiphip 同意，SO 解决方案最简单，希望他将其作为单独的答案发布

【解决方案2】：

我将解决方案作为单独的答案发布。

要使图标点击工作而不是：

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
       el.datepicker();
     }
  };
})

可以使用类似的东西：

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
        el.datepicker({});
        var component = el.siblings('[data-toggle="datepicker"]');
        if (component.length) {
            component.on('click', function () {
                el.trigger('focus');
            });
        }
    }
  };
})

这里是完整的 sn-p 解决方案： http://jsfiddle.net/cPVDn/53/

【讨论】：

【解决方案3】：

在bootstrap documentation 的示例中，他们的做法有点像这样：

<div class="input-append date datepicker">
  <input type="text" is-open="opened" datepicker-popup ng-model="date"/> 
  <span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span>
</div>

然后在控制器中：

  $scope.openAction = function ($event) {

    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = !$scope.opened;   
}

【讨论】：