Angular-UI date picker is in invalid state when given a specified date format while the ng-model has a string value as “yyyy-MM-ddThh:mm:ssZ”

[1002nights]

I am getting my date value from Mongoose as "2015-10-08T00:00:00Z" and when this is binded to the angular-ui datepicker, the form filed is shown as "ng-invalid". It seems as though when grabbing the date from the model it comes back as a string when datepicker is searching for a date object. This StackOverflow words the question better than myself and shows the issue.

http://stackoverflow.com/questions/33017677/angular-ui-date-picker-is-in-invalid-state-when-specified-the-date-format-as-d

It also has a solution from user, Chet, I don't know his Github handle but the solution is below

angular.module('test')
.config(['$httpProvider', function ($httpProvider) {

    // ISO 8601 Date Pattern: YYYY-mm-ddThh:MM:ss
    var dateMatchPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;

   var convertDates = function (obj) {
      for (var key in obj) {
         if (!obj.hasOwnProperty(key)) continue;

         var value = obj[key];
         var typeofValue = typeof (value);

         if (typeofValue === 'object') {
            // If it is an object, check within the object for dates.
            convertDates(value);
         } else if (typeofValue === 'string') {
            if (dateMatchPattern.test(value)) {
               obj[key] = new Date(value);
            }
         }
      }
   }

   $httpProvider.defaults.transformResponse.push(function (data) {
      if (typeof (data) === 'object') {
         convertDates(data);
      }

      return data;
   });
}])

I just wanted to report this bug and hopefully help a few more people find the solution as I've spent 2 days trying to figure it out.

[icfantv]

If I understand the use case correctly, this is not a bug. The datepicker directive expects a Date object for ng-model. The solution you post above converts EVERY date string in an HTTP response that matches a pattern to a Date object which may not be the desired behavior and certainly not every user will want this. This is a VERY heavy-handed solution.

Also, you may want to take a look our dateParser service (deprecated and renamed to uibDateParser in 0.14.0) which does this for you. Here's a link to the source code.

[1002nights]

@icfantv Cool thanks for sharing the DateParser, I am still new to Angular so I am trying to figure it out, solid point and why the solution above may not be the best. However, may I ask you how exactly do I use the uibDateParser? Do I just run all of my Date models through the parser as such?

uibDateParser($scope.model.dateObj)

Thanks for your help nonetheless! :)

[icfantv]

So if you look at the code for datepicker, you'll see that we use the service internally in several areas to convert a text string value to a Date object. As with all services in Angular, we just inject it as we normally would with any other dependency.

It's a little by design that the date parser isn't documented anywhere - I don't know that it's designed to be used outside the project. But basically, it exposes a parse method that takes in an input that's a text string and a format and attempts to create a Date object from that format. I would ignore the baseDate parameter.

Based on that, you might want to use this service as a starting block for your own application's service and use that instead.