2015-03-18 2 views
0

Может кто-нибудь помочь мне посмотреть на этот plunkr. Стиль, похоже, не работает.Bootstrap DatePicker style не работает должным образом angularjs

<!DOCTYPE html> 

<div ng-controller="testController"> 
    <h1>Hello Plunker!</h1> 
    <input type="text" name="bDay" ng-model="mydate | date : 'dd-MM-yyyy'" id="" value="" ng-click="showDatePicker('bday')" /> 
    <div date-picker="mydate" view="year" min-view="date" ng-class="{hidden: (picker !== 'bday')}" auto-close="true"></div> 
    {{mydate}} 
</div> 

<script> 
    var app = angular.module('sample', ['datePicker']); 

    app.controller('testController', ['$scope', function($scope){ 

    $scope.picker = 'null'; 

    $scope.showDatePicker = function(picker){ 
     $scope.picker = 'null'; 
     setTimeout(function(){ 
      $scope.picker = picker; 
      $scope.$apply(); 
     }, 100); 
    } 

}]); 



</script> 

http://plnkr.co/edit/94TifOjXZjEAhA25Kl4A?p=preview

+0

Что должен ваш подборщик выглядеть? Можете ли вы объяснить свою проблему более подробно? – nweg

+0

Plunkr был решением проблемы. Но стиль бутстрапа переставал работать. Выборщик должен появиться как бутстрап datepicker. – uikrosoft

ответ

1

Предполагаете, вы имеете в виду, что хотите, чтобы это выглядело как this datepicker. По большей части, он похож на годовую датупиксера с этой страницы. Несколько отличий:

Стрелки нуждаются в «пред» и «следующий» классы для правильного размера шрифта

разница в цвета разница между «активным» и «сейчас» классы применяются к этому году поле

Ваша датапикер не отображается во всплывающем окне, так как html вставлен в строку, а не как внук элемента с телом в качестве родителя.

Если вам нужны серые даты, вам необходимо применить «старый» класс.

+0

Вы прочитали название? – uikrosoft

+0

Да, да. Однако я не читал вопрос, так как вы его не спрашивали. Если вы обеспокоены только появлением сборщика дат, возможно, вы не должны были скрывать всю вещь в своем plunkr изначально. Есть также несколько виджетов bootstrap datepicker, поэтому я не знаю, на какой из них вы хотите выглядеть. Во всяком случае, ваш datepicker выглядит как год один на [этой странице] (http://www.eyecon.ro/bootstrap-datepicker/). Я отредактировал свой ответ, чтобы разобраться в различиях в HTML/CSS. –

0

Убедитесь, что ваши версии JQuery являются clashing.i не имели точно такой же вопрос и решен it.You косяк использование JQuery 1.10.4 и 1.1.34 .... и т.д ...

Смежные вопросы