UI Bootstrap datepicker says invalid date for ISO-8601 date string

Question

I receive the dates in ISO 8601 format 2011-11-14T14:48:00 from Web API as this is how the dates are serialized by default. On Client, I bind the date values with an input control and I am using UI Bootstrap datepicker for date controls. The binding happens well and I can see the date in any specified date format. But when I tab out from the control without making any changes, the model value becomes invalid. I don't think the date is invalid because if I delete a digit in the date value and retype the same and then tab out, the model value becomes valid.

Markup

<input type="text" uib-datepicker-popup="{{dateFormat}}" ng-model="statusChangeDate" datepicker-options="dateOptions" is-open="opened" />
<span class="input-group-btn">
<button type="button" ng-click="open($event, 'status')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

Controller

// This will come from a Web API call
$scope.statusChangeDate = '2011-11-14T14:48:00';

Answer 1

Insure that $scope.statusChangeDate is of Type Date. $scope.statusChangeDate = new Date('2011-11-14T14:48:00');