Prevent jquery datepicker formatDate exception

[candreoliveira]

In my point of view, you must catch the exception in your uiDateFormat directive to prevent the dowdy console error:

TypeError: Object 123 has no method 'getFullYear'

The error occurs when you type a malformed string in the input where you apply the ui-date.

Your directive try to execute (https://github.com/angular-ui/ui-date/blob/master/src/date.js#L99):

jQuery.datepicker.formatDate(dateFormat, value);

But I think you must execute:

modelCtrl.$parsers.push(function(value){
  try{
    if (value)
      return jQuery.datepicker.formatDate(dateFormat, value);                  
  } catch(err) {}
  return null;
});

Give permission to PR

[pragmatical]

I think this module needs to behave more like a wrapper to the datepicker, so if things are getting passed in which break datepicker, it is perfectly fine to throw the error. There is one exception to this, and that is the case of handling undefined for the specific value since the actual model may not be defined (be in the $scope) during any particular $digest execution. In a different scenario we would want to throw an error in this case but with Angular it is normal for this to happen. Any other error though, I think will fall on the responsibility of the caller to handle as to not cause strange behavior where errors are being swallowed (makes debugging very painful).

[candreoliveira]

@pragmatical,

I agree partially with you.

The problem is not a datepicker error, and I agree you must throw all datepicker real errors like a "wrapper".

However, the error I mentioned is thrown when you (programatically) try to format a string that is not (yet) a date (the user is typing the full date).

Or, at least, you check length of the string before to call "formatDate", or you should catch errors to prevent those console boring errors (they are unnecessary and ugly).

Do you agree?

[pragmatical]

interesting, but absolutely make sense. I thought this might have taken
care of by this check-in:

5f24c7c

I have not encountered this case yet personally in my usage (but I just
started looking at this project a few days ago). :)

On Mon, Nov 18, 2013 at 9:52 AM, Carlos André Oliveira <
notifications@github.com> wrote:

@pragmatical https://github.com/pragmatical,

I agree partially with you.

The problem is not a datepicker error, and I agree you must throw all
datepicker real errors like a "wrapper".

However, the error I mentioned is thrown when you (programatically) try to
format a string that is not (yet) a date (the user is typing the full
date).

Or, at least, you check length of the string before to call "formatDate",
or you should catch errors to prevent those console boring errors (they are
unnecessary and ugly).

Do you agree?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/48#issuecomment-28709293
.

[jualvarez]

Hello @pragmatical, what is the status of this issue?
I agree with @candreoliveira. I'm getting the same error while the user manually edits the date and while the date is not (yet) valid. This is not something that can be catched in your code base, since it's part of angular's data binding processes. It's triggered because the model's value was changed using a DOM element. Please consider the PR.

[alexanderchan]

I think the way this directive validates and parses needs to be updated to use some of the features available since 1.3 and this will resolve many of the errors or invalid data getting propagated to the parsers/model.

[justinwinslow]

Bump for this. The solution suggested in the first post seems reasonable. It's not really a problem in the core lib because the ui datepicker prevents "wrong" characters when the plugin is attached to an input via $( "#datepicker" ).datepicker();. Scratch that, that's not exactly true.

The reality is, the plugin appears to be doing roughly what's been suggested: https://github.com/jquery/jquery-ui/blob/master/ui/widgets/datepicker.js#L718

[alexanderchan]

@justinwinslow in master now I've added a validator instead of throwing errors, there should be another test around this but perhaps you can check if this helps for your case?

[justinwinslow]

It still fails here: https://github.com/angular-ui/ui-date/blob/master/src/date.js#L30 when typing into the input.

TypeError: date.getFullYear is not a function
    at Datepicker.$.extend.formatDate (datepicker.js:1382)
    at Object.dateToString (date.js:30)
    at Array.<anonymous> (date.js:189)
    at $$parseAndValidate (angular.js:25326)
    at $commitViewValue (angular.js:25316)
    at angular.js:25459
    at Scope.$eval (angular.js:16052)
    at Scope.$apply (angular.js:16152)
    at $$debounceViewValueCommit (angular.js:25458)
    at $setViewValue (angular.js:25430)

[alexanderchan]

@justinwinslow thanks for your help. I've reproduced the problem and found a corresponding test for the fix.