Date not showing up in angular-bootstrap datepicker

Question

I have a table which conatians some dates and I am trying to use angular ui bootstrap to get a datepicker to edit them.

While the datepicker pops up fine and allows me to select a date with no issue, the date itself does not appear in the input until after I have selected a new one from the popup.

Can be recreated with this code:

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <style>
    .full button span {
      background-color: limegreen;
      border-radius: 32px;
      color: black;
    }

    .partially button span {
      background-color: orange;
      border-radius: 32px;
      color: black;
    }
  </style>
  <div ng-controller="DatepickerPopupDemoCtrl">
    <table>
      <tbody>
        <tr ng-repeat="event in eventFixtures track by $index">
          <td>
            <div class="row">
              <div class="col-md-6">
                <p class="input-group">
                  <input type="text" class="form-control" ng-model="event.date" uib-datepicker-popup="dd/M/yyyy" is-open="event.isOpen" ng-click="event.isOpen = true;" />
                </p>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

and this:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
  $scope.eventFixtures = [
    {name: "1", date: "1-1-01"},
    {name: "2", date: "2-2-02"},
    {name: "3", date: "3-3-03"},
    {name: "4", date: "4-4-04"},
    {name: "5", date: "5-5-05"}
  ];

});

MysteriousWaffle · Accepted Answer · 2017-01-06 22:33:05Z

2

Figured it out, the issue was the date data source is a string not a Date object. When you select a new data object it is written into the variable but until then it's a string and as such won't.

If you write this after the eventFixtures declaration, it will transform the dates and illustrate the issue:

   for(var i = 0; i < $scope.eventFixtures.length; i++) {
        $scope.eventFixtures[i].date = new Date($scope.eventFixtures[i].date);
    }

answered Jan 6, 2017 at 22:33

MysteriousWaffle

4912 gold badges5 silver badges18 bronze badges

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

1 Comment

mhodges Over a year ago

Glad you got it figured out! Good catch

Collectives™ on Stack Overflow

Date not showing up in angular-bootstrap datepicker

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related