Bootstrap DatePicker style not working properly angularjs

Question

Can someone help me look at this plunkr. The style seems not to be working.

<!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

What is your picker supposed to look like? Can you explain your issue in more detail? — nweg
– nweg, Commented Mar 18, 2015 at 2:36
The plunkr was a solution to an issue. But the bootstrap style stopped working. The picker suppose to appear like the bootstrap datepicker. — codegrid
– codegrid, Commented Mar 18, 2015 at 2:44

Tahsis Claus · Accepted Answer · 2015-03-18 03:15:07Z

1

I assume you mean you want it to look like this datepicker. For the most part, it does look like the yearly datepicker from that page. Few differences:

The arrows need the "prev" and "next" classes for proper font sizing

The difference in color is the difference between the "active" and "now" classes being applied to that year box

Your datepicker isn't in a popup since the html is inserted inline, rather than as a grandchild of an element with body as its parent.

If you want any gray dates, you need to apply the "old" class.

edited Mar 18, 2015 at 3:15

answered Mar 18, 2015 at 2:35

Tahsis Claus

1,9291 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tahsis Claus Over a year ago

Yes I did. I did not, however, read a question since you didn't actually ask one. If you are concerned only with the appearance of the date-picker, perhaps you shouldn't have the hidden the entire thing in your plunkr initially. There are also multiple bootstrap datepicker widgets, so I have no way of knowing which one you want it to look like. At any rate, your datepicker does look like the year one on this page. I edited my answer to go over the differences in the HTML/CSS.

Angela Dutchan · Accepted Answer · 2017-02-16 23:36:50Z

0

Make sure your jquery versions are not clashing.i had the exact same issue and resolved it.You cant use jquery 1.10.4 and 1.1.34....etc...

answered Feb 16, 2017 at 23:36

Angela Dutchan

6710 bronze badges

Collectives™ on Stack Overflow

Bootstrap DatePicker style not working properly angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related