CuppaLabs
Invalid Date error in firefox at demo page
There is an exception at demo page and pickers are broken. It occurs on load of Date picker and Range picker examples and on picking day at other examples.
Browser: Firefox 57.0.4 (64-bit) OS: Ubuntu 14.04 Locale: en-US
Error: InvalidPipeArgument: 'Invalid Date' for pipe 'DatePipe'
Stack trace: invalidPipeArgumentError@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:7371:12 ../../../common/@angular/common.es5.js/DatePipe.prototype.transform@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:8267:23 checkAndUpdatePureExpressionInline@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:48678:33 checkAndUpdateNodeInline@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49376:17 checkAndUpdateNode@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49309:16 debugCheckAndUpdateNode@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:50173:38 debugCheckRenderNodeFn@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:50152:13 View_DatePicker_1/<@ng:///AngularDateTimePickerModule/DatePicker.ngfactory.js:30:46 debugUpdateRenderer@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:50137:12 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49281:5 callViewAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49644:21 execEmbeddedViewsAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49602:17 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49277:5 callViewAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49644:21 execComponentViewsAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49576:13 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49282:5 callViewAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49644:21 execComponentViewsAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49576:13 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49282:5 callViewAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49644:21 execEmbeddedViewsAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49602:17 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49277:5 callViewAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49644:21 execComponentViewsAction@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49576:13 checkAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:49282:5 callWithDebugContext@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:50499:39 debugCheckAndUpdateView@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:50039:12 ../../../core/@angular/core.es5.js/</ViewRef_.prototype.detectChanges@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:47202:9 ../../../core/@angular/core.es5.js/</ApplicationRef_.prototype.tick/<@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:41825:58 ../../../core/@angular/core.es5.js/</ApplicationRef_.prototype.tick@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:41825:13 next/<@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:41697:100 ../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2907:17 onInvoke@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40903:24 ../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invoke@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2906:17 ../../../../zone.js/dist/zone.js/</</Zone.prototype.run@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2657:24 ../../../core/@angular/core.es5.js/</NgZone.prototype.run@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40834:54 next@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:41697:70 ../../../core/@angular/core.es5.js/</EventEmitter.prototype.subscribe/schedulerFn<@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40648:36 ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:1097:13 ../../../../rxjs/Subscriber.js/SafeSubscriber.prototype.next@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:1044:17 ../../../../rxjs/Subscriber.js/Subscriber.prototype._next@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:984:9 ../../../../rxjs/Subscriber.js/Subscriber.prototype.next@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:948:13 ../../../../rxjs/Subject.js/Subject.prototype.next@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:692:17 ../../../core/@angular/core.es5.js/</EventEmitter.prototype.emit@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40634:54 checkStable@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40868:13 onHasTask@https://cuppalabs.github.io/angular2-datetimepicker/vendor.bundle.js:40916:21 ../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.hasTask@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2960:21 ../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype._updateTaskCount@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2980:17 ../../../../zone.js/dist/zone.js/</</Zone.prototype._updateTaskCount@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2804:17 ../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:2724:25 drainMicroTaskQueue@https://cuppalabs.github.io/angular2-datetimepicker/polyfills.bundle.js:3117:25
The problem in this particular case is how date formation is performed.
In chrome if we write - new Date("MM-DD-YYYY") this will lead to a legit proper date.
But with firefox and Safari this statement will result in INVALID DATE. In this package date is formed using hyphens and if we replace those hyphens(-) with forward slashes(/) -- all will be peachy.
We need to make changes at two places in file src/app/angular2-datetimepicker/datepicker.component.ts
Line #191 dateRow.push({ day: dateCell, date: new Date((month + 1) + '/' + dateCell + '/' + date.getFullYear()) });
Line #463 return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
