5

我正在使用 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/

4

3 回答 3

1

请参阅 AngularStrap 的优秀插件,它可以解决您的问题:链接

JS

.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


这是他们的主页

于 2013-08-04T15:16:51.987 回答
1

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

要使图标单击起作用,而不是:

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');
            });
        }
    }
  };
})

这是带有解决方案的完整片段:http: //jsfiddle.net/cPVDn/53/

于 2015-01-21T13:24:12.890 回答
0

引导文档的示例中,他们这样做有点像这样:

<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;   
}
于 2014-09-17T15:08:47.973 回答