Angular 2 + firefox + Eingang + type = Datum picker nicht

Question

-Code nicht zeigen richtig funktioniert in Chome Browser

<div class="form-group"> 
    <label for="date">Date:</label> 
    <input class="form-control " [(ngModel)]="journal.record.date" type="date" required/> 
</div> 
<br/> 
<div class="form-group"> 
    <label for="timeEntered">Time Entered:</label> 
    <input class="form-control " [(ngModel)]="journal.record.entered" type="time" required/> 
</div> 

Aber Firefox zeigt nicht picker und Timepicker

HTML enthält:

<!-- 1. Load libraries --> 
<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 

oder:

<!-- 1. Load libraries --> 
<!-- IE required polyfills, in this exact order --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 

Es hilft nicht

Ich begann WebShim zu überprüfen enter link description here es nicht allzu funktioniert

Wie kann ich ein solches Problem verbessern?

Answer 1

Das funktioniert, aber es ist viel zusätzliche Arbeit. Vielleicht bekommen wir bald einen in angular.

index.html

<script src="js/jquery-1.11.3.min.js"></script> 
<script src="js/modernizr-2.8.3.min.js"></script> 
<script src="js/webshim/minified/polyfiller.js"></script> 
<script> 
    webshim.setOptions('basePath', '/js/webshim/minified/shims/'); 
    // http://afarkas.github.io/webshim/demos/demos/cfgs/input-date.html#min=&max=&value=&list=&placeholder=&startView=2&minView=0&size=1&startValue=&useDecadeBase=0&calculateWidth=on&popover=&popover=&popover=&show-week=on 
    webshim.setOptions('forms', { 
     lazyCustomMessages: true, 
     addValidators: true, 
     extendNative: true 
    }); 
    webshim.setOptions('forms-ext', { 
     replaceUI: 'auto', 
     types: 'date', 
     date: { 
      startView: 2, 
      size: 1, 
      classes: 'hide-spinbtns' 
     } 
    }); 
    webshim.polyfill('forms forms-ext'); 
</script> 

app.module.ts

... 
import { WebshimPolyfill } from '../webshim-polyfill'; 

@NgModule({ 
    imports: [... 
    ], 
    declarations: [ 
     WebshimPolyfill, 
     ... 
    ], 
    bootstrap: [ 
     // The main app component 
     AppComponent 
    ] 
}) 
... 

webshim-polyfill.ts

import { Directive, AfterViewInit, Input, EventEmitter, ElementRef } from '@angular/core'; 

declare var webshim: any; 
declare var $: any; 


@Directive({ 
    selector: '[webshimPolyfill]', 
    outputs: ['ngModelChange'] 
}) 

export class WebshimPolyfill implements AfterViewInit { 
    private ngModelChange = new EventEmitter(); 
    @Input() validatevalue: Function; 
    @Input() thisarg; 

    constructor(private el: ElementRef) { } 

    ngAfterViewInit() { 
     let id = this.el.nativeElement.id; 
     $("#" + id).updatePolyfill(); 
     if (this.validatevalue) 
      $("#" + id).on('validatevalue', 
       (e: any, data: any) => { 
        return this.validatevalue.apply(this.thisarg, [e, data]); 
      }); 

     // this library creates a shadow dom element for <input type="date" 
     // do this if we want to work with the visible element 
     /* let elShadow = $("#" + id).getShadowElement()[0]; 
     * elShadow.onchange = (event) => { 
     */ 

     // don't use function(){} as this becomes the element not this 
     // and we cannot then ngModelChange.emit. 
     this.el.nativeElement.onchange = (event) => { 
      this.ngModelChange.emit(this.el.nativeElement.value); 
     }; 

     // (change) on <input> element doesn't work right now 
     // maybe 'export as' can fix that 
// https://medium.com/@NetanelBasal/angular-2-take-advantage-of-the-exportas-property-81374ce24d26#.jnpr99ncb 
    } 
    // webshim.setOptions is done in index.html as per webshims suggestion. 
} 

form.component.html

<input webshimPolyfill [validatevalue]="validDay" [thisarg]="thisarg" type="date" id="someDate" formControlName="someDate" [(ngModel)]="someDate" (change)="onChangeSomeDate();" >