@faragly

Как заставить работать Clockface на AngularJS?

Доброго времени суток, уважаемые разработчики!
Помогите заставить заработать на Angular этот чудо-плагин для jquery. Это timepicker Clockface. Нашел кусок кода, но не работает. Там приведена директива
.directive('clockface', function() {
            return {
                restrict: 'A',
                require : 'ngModel',
                link: function(scope, element, attrs, ngModelCtrl) {
                    element.clockface({
                        format: 'HH:mm'
                    }).on('pick.clockface', function(e, data) {
                        var hr=data.hour?("0" +data.hour).slice (-2):'00';
                        var mn=data.minute?("0" +data.minute).slice (-2):'00';
                        ngModelCtrl.$setViewValue(hr+':'+mn);
                        scope.$apply();
                    });
                }
            };
        });

HTML код:
<input type="text"  data-format="HH:mm" class="form-control clockface" clockface ng-model="to_time"/>

Но там у автора вопроса хотя бы что то работает, но не закрывается, у меня вообще не работает. Прошу помощи, помогите сделать рабочий вариант.
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
@faragly Автор вопроса
Оказывается все работает, если использовать указанный код, плагин использует CSS bootstrap'а, поэтому надо добавить в clockface.css класс .dropdown-menu
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

Скопировал все как в bootstrap.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы