кликабельный значок bootstrap-datepicker с угловой директивой

Я использую 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/


datepicker angularjs twitter-bootstrap directive
person michal    schedule 02.08.2013    source источник
comment
пожалуйста, опубликуйте свое редактирование как ответ   -  person Maxim Shoustin    schedule 17.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Посмотрите хороший плагин от 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

А это их главная страница.

person Maxim Shoustin    schedule 04.08.2013
comment
Я использовал angular-bootstrap в своем проекте и не хочу смешивать эти два, но после вашего предложения я изучил источники и нашел решение. Спасибо! - person michal; 04.08.2013
comment
Этот ответ не лучший. ОБНОВЛЕНИЕ ответа на вопрос - лучший ответ. Он просто использует директиву. Я думаю, было бы хорошо иметь это решение здесь, на этой странице. - person dxvargas; 17.09.2014
comment
@hiphip верно, он опубликовал редактирование 10 месяцев спустя. Но все же он использует bootstrap-datepicker плагин - person Maxim Shoustin; 17.09.2014
comment
@MaximShoustin, в вопросе упоминался bootstrap-datepicker. Чем решение в UPDATE нужно только добавить пользовательскую директиву b-datepicker. Наверняка это другое решение (поэтому было бы неплохо разместить его как ответ), и для меня оно лучшее. У вас есть альтернативное решение с использованием библиотеки AngularStrap, это нормально. - person dxvargas; 17.09.2014
comment
@hiphip согласен, решение SO самое простое, надеюсь, он опубликует его как отдельный ответ - person Maxim Shoustin; 17.09.2014

arrow_upward
1
arrow_downward

Я публикую решение как отдельный ответ.

Чтобы щелчок по значку работал вместо:

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/

person michal    schedule 21.01.2015

arrow_upward
0
arrow_downward

В примере в документация по начальной загрузке они делают это примерно так:

<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;   
}
person dxvargas    schedule 17.09.2014