Angular 2 + firefox + input + type=date datepicker does not show -

code works correct 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> 

but firefox not show datepicker , timepicker

html contains:

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

or:

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

it not help

i started check webshim enter link description here not work too

how can improve such issue?

this works, it's lots of work. maybe 1 in angular soon.

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 } '../webshim-polyfill';  @ngmodule({     imports: [...     ],     declarations: [         webshimpolyfill,         ...     ],     bootstrap: [         // main app component         appcomponent     ] }) ... 

webshim-polyfill.ts

import { directive, afterviewinit, input, eventemitter, elementref } '@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]);             });          // library creates shadow dom element <input type="date"         // if want work visible element         /* let elshadow = $("#" + id).getshadowelement()[0];          * elshadow.onchange = (event) => {          */          // don't use function(){} becomes element not          // , cannot ngmodelchange.emit.         this.el.nativeelement.onchange = (event) => {             this.ngmodelchange.emit(this.el.nativeelement.value);         };          // (change) on <input> element doesn't work right         // maybe 'export as' can fix // https://medium.com/@netanelbasal/angular-2-take-advantage-of-the-exportas-property-81374ce24d26#.jnpr99ncb      }     // webshim.setoptions done in index.html per webshims suggestion. } 

form.component.html

<input webshimpolyfill [validatevalue]="validday" [thisarg]="thisarg" type="date" id="somedate" formcontrolname="somedate" [(ngmodel)]="somedate" (change)="onchangesomedate();" >