bug(datepicker): input manually -> invalid or day/month is switched

Hello,

I want to be able to enter the date manually (to quickly set the year or paste some other date). This seems to work partially with Chrome, but not with Firefox as you can see with this fiddle (this fiddle only works with Firefox, since Chrome does not load all resources!):

http://jsfiddle.net/BVufZ/5/

Moreover in Chrome when I use an input field with the datepicker-popup and the option:

datepicker-popup="dd.MM.yyyy"

then the day and month value are interpreted wrong when changing the date manually in the input field. With the option:

datepicker-popup="dd.MMMM.yyyy"

everything works fine, but I don't want the name of the month!

Can you confirm this problem?
Thanks!

[bekos]

Hi @wemove. Have not played with your fiddle but you have to know that datepicker-popup format is used only to output values. When you want to manually alter the date then your value in the <input> is parsed from the standard Date object, so your requested format is not recognized.

To solve your problem you have to inject another $parser (with another directive) to transform from your format to a format that Date understands correctly. I hope I have helped, if your talking about something else, i will look into this one later.

Thanks for the quick answer! With a directive and doing something like this:

ngModel.$parsers.push(function(data) {
    // convert data from view format to model format
    var splitted = data.split('.');
    var convertedDate = splitted[1] + "/" + splitted[0] + "/" + splitted[2];
    return new Date(Date.parse(convertedDate)); // converted
});

I was able to fix my problem to enter a date manually.

Have a good day!

[MattiJarvinen-BA]

So this would be open issue still. Since there is

      // TODO: reverse from dateFilter string to Date object
      function parseDate(viewValue) {

and this issue is unresolved.

Perhaps something can be used from http://momentjs.com/docs/#/parsing/string-format/

[bekos]

@MattiJarvinen This comment was left as a note to my future self or anyone reading the code and is willing to help. Everything works as supposed to. The "problem" is that we are missing a proper date parser, similar to the jQuery UI's parser that ui-date is using, and would make peoples lives easier.

You are right that we can borrow "ideas" for moment's parsing, and if you (or anyone) want to implement or help to implement a dateParser that reverses the work of dateFilter that would be really awesome, at least for me :-)

[Sjors]

@wemove can you explain a bit more how you did this? I tried this:

angular.module("MyAppName").directive('eudate', function() {
    return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {
        if(!ngModel) return; 

        ngModel.$parsers.push(function(data) {
            // convert data from view format to model format
            var splitted = data.split('.');
            var convertedDate = splitted[1] + "/" + splitted[0] + "/" + splitted[2];
            return new Date(Date.parse(convertedDate)); // converted
        });
      }
    };
  });

I then added the attribute "eudate" to my date picker.

But when I modify the date I'm seeing:

TypeError: Object [object Date] has no method 'split'

@Sjors Please have a look at my blog, where I added a complete directive. I admit that it's not that beautiful, but it works well for me: http://developer.the-hideout.de/?p=119

[Sjors]

@wemove thanks, that works! In my case I'm using "dd/MM/yyyy" as the format, but that was just a matter of modifying the format === "dd.MM.yyyy" and newDate.split('/') lines.

[kasuparu]

@wemove Thank you for the great fix (http://developer.the-hideout.de/?p=119). Just wanted to add that it requires jQuery to function properly, as element.on(...) makes use of eventData argument, not supported by jqLite.

[julienmeyer]

@bekos a dateParser exists : https://github.com/dnasir/angular-dateParser