Date pipe, RC1 Android webview


#1

Hello,

i wouldlike to use date pipe as follow:
{{created_at | date: 'dd/MM/yyyy à HH:mm:ss' }}

With ionic serve all is ok in the browser (chrome, firefox). But when i launch the android emulator (marshmallow) the date pipe cause error:
Cannot convert undefined or null to object (polyfills.js)


#2

Same issue here. Before RC, I added the following line to index.html

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

but that no longer works with RC1. Can someone help me or point me to docs for loading external js files in RC.

Thanks


#3

if you search the GitHub of Ionic and Ionic app-scripts I think you will still find some issue which are open or closed about that. I think it’s still not 100% resolve.

I had the same issue, invested time, went mad, finished by creating my own pipes using momentjs


#4

I’m having same problem with iOS emulator. I’m doing a simple {{value|date}} and works fine with serve and in emulator it gives me:

2     322277   error    EXCEPTION: null is not an object (evaluating 'new Intl.DateTimeFormat(e,n)')

I guess I’ll create my own moment.js pipe for now :confused:


#5

Same problem over here using a real android device. Simple date pipe {{ value | date }} working fine with serve an error on device:

TypeError: Cannot convert undefined or null to object
    at new DateTimeFormat (native)

system information:

Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
OS: Windows 8.1
Node Version: v6.9.1

Android platform information:
“Mozilla/5.0 (Linux; Android 6.0; LENNY3 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Crosswalk/21.51.546.7 Mobile Safari/537.36”


#6

Exact same error here, guess I’ll try writing a custom pipe…


#7

By now, I’m using angular2-moment, moment.js pipes for Angular2


#8

@reedrichards can you please share your pipe code ?


#9

Actually I did a component not a pipe. Something like

ts:

 import {Component, Input} from '@angular/core';
 import moment from 'moment';

@Component({
templateUrl: 'display-date.html',
selector: 'display-date'
})
export class DisplayDateDirective {

  @Input() displayDate:Date;

   getFormattedDate():string {
      return this.displayDate != null ? moment(this.displayDate).format('ll') : '';
   }
 }

html:

<span>{{getFormattedDate()}}</span>

#10

@reedrichards thanks for help.