Invalid argument 'Thu Jun 15 2017 00:00:00 GMT+0800 (CST)' for pipe 'DatePipe'

[panda6412]

This html part ` <pikaday [(day)]="selectedDay" format="YYYY-MM-DD" id ="datePicker" minDate="2010-1-1" maxDate="2025-12-31" firstDay="1"> <button class="button-default" (click)="search()">search

selectedDay: {{selectedDay|date}}

` This is dart part ` DateTime selectedDay = new DateTime(2016, 12, 14);` I follow your demo and try doing that like , but it gave this exception which place I may miss , could you give me hand

[simon-void]

Can you upload the complete code somewhere? What's the exception? What i notice so far: I hope your dart part is part of an Component like the one in the demo (AppComponent). The button references a methode called search, which whould be part of the same class as the selectedDay-property.

[panda6412]

Actually , I download your demo project , and run on my local , when I choose the date , it will throw the exception as follow html_dart2js.dart:3530 EXCEPTION: Invalid argument 'Fri Jun 23 2017 00:00:00 GMT+0800 (CST)' for pipe 'DatePipe' STACKTRACE: Invalid argument 'Fri Jun 23 2017 00:00:00 GMT+0800 (CST)' for pipe 'DatePipe' at Object.wrapException (http://localhost:9999/main.dart.js:2971:17) at DatePipe.transform$2 (http://localhost:9999/main.dart.js:15077:19) at DatePipe.dart.DatePipe.transform$2 [as transform$1] (http://localhost:9999/main.dart.js:15104:21) at Object.eval [as call$1] (eval at Closure_forwardInterceptedCallTo (http://localhost:9999/main.dart.js:1:1), <anonymous>:2:38) at pureProxy1_closure.call$3 (http://localhost:9999/main.dart.js:17254:31) at pureProxy1_closure.call$1 (http://localhost:9999/main.dart.js:17259:21) at ViewAppComponent0.detectChangesInternal$0 (http://localhost:9999/main.dart.js:19909:39) at ViewAppComponent0.dart.AppView.detectChanges$0 (http://localhost:9999/main.dart.js:17138:16) at ViewAppComponentHost0.detectChangesInternal$0 (http://localhost:9999/main.dart.js:19975:12) at ViewAppComponentHost0.dart.AppView.detectChanges$0 (http://localhost:9999/main.dart.js:17138:16) ORIGINAL EXCEPTION: Invalid argument 'Fri Jun 23 2017 00:00:00 GMT+0800 (CST)' for pipe 'DatePipe'

I live in Asia , Taiwan , is that probably cause the problem due to timezone

[simon-void]

Your exception is actually about the DatePipe part (thats the | date in <div>selectedDay: {{selectedDay | date}}</div>). So the first thing you can do is to use <div>selectedDay: {{selectedDay}}</div> instead. This should work, but the default format is not that pretty, but for a prov of concept it will work. What seems to happen is that {{selectedDay|date}} doesn't pipe the DateTime selectedDay into the DatePipe pipe, but the toString-representation of selectedDay. very strange. quickfix: instead of using the DatePipe you could use your own formating-method formatDate <div>selectedDay: {{formatDate(selectedDay)}}</div>which you would add to your controller:

class AppComponent {
  DateTime selectedDay = new DateTime(2015, 2, 1);
  String formatDate(DateTime date) => "${date.day}.${date.month}.${date.year}!";
}

The downside here is that you would have to add this method to each controller (or inject an own DateFormater instance into each controler)! Instead it would be nice if DatePipe simply worked as how it was supposed to. I'll try to find a better solution, but you can use this suggestion here as a workaround.

[simon-void]

The problem may lie within the dart-to-js-compilation. Which browser do you use? (it works fine for me in Dartium, Chromium and Firefox on Linux.)

[panda6412]

You're right I works fine on Dartium , but Chrome need to dart to js and here is my pubspec.yaml `name: untitled description: A web app that uses AngularDart Components version: 0.0.1

homepage: https://www.example.com

author: user email@example.com

environment: sdk: '>=1.23.0 <2.0.0'

dependencies: angular2: ^3.1.0 angular_components: ^0.5.1 queries: "^0.0.15" pikaday_datepicker_angular2: "^2.1.1"

dev_dependencies: angular_test: ^1.0.0-beta+2 browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 test: ^0.12.0 dartson: "^0.2.7"

transformers:

• angular2: platform_directives:
  • 'package:angular2/common.dart#COMMON_DIRECTIVES' platform_pipes:
  • 'package:angular2/common.dart#COMMON_PIPES' entry_points: web/main.dart
• angular2/transform/reflection_remover: $include: test/**_test.dart
• test/pub_serve: $include: test/**_test.dart
• dart_to_js_script_rewriter
• dartson`

[simon-void]

i can recreate your problem in firefox in my project (after adding dart_to_js_script_rewriter) when i do a debug-build of my code (Release-build fails silently). In Chromium it doesn't even want to load, but firefox has your error message: Invalid argument 'Fri Jun 16 2017 00:00:00 GMT+0200 (CEST)' for pipe 'DatePipe'

which is good, because now i can debug :)

[simon-void]

The problem is leaking from package:js through pikaday to pikaday_datepicker_angular2. (JavaScript Date objects are not correctly converted to Dart DateTime objects. So that's why the DatePipe is unhappy, it doesn't get a proper DateTime instance.) I got a workaround from the author of pikaday(dart-wrapper), but we investigate if there is an even better solution. In any case, a solution will come soon.

[panda6412]

Thanks for assistance , I'm pleasure to hear it !!

[simon-void]

Well, it's the workaround for now. Checkout the new version 2.1.3. The workaround is that you have to import a js-helper-file for now: <script src="jsLibs/pikaday_dart_helpers.js"></script> The you can find the file under web/libs or originally from within the pikaday package.

[simon-void]

Checkout the new version 2.1.4. You don't have to take care of the pikaday_dart_helpers.js-file yourself, just import it with <script src="packages/pikaday/pikaday_dart_helpers.js"></script>

[panda6412]

It's work perfect now !!

[simon-void]

nice :)