title: Does anyone know a easy date picker to use in an angular 2 app?
body: <p><strong>Does anyone know a easy date picker to use in an angular 2 app?</strong></p>
  
  <p>I cant seem to get jquery ui date picker working?</p>
  
  <p>does anyone know an easy one to implement.</p>
  
  <p>I've tried html date but it doesnt work in all browsers.</p>
  
  <p>I'm using typescript with html5 and angular2</p>
  
  <p>I tried installing this one: <a href="http://jankuri.com/components/angular2-datepicker" rel="noreferrer">http://jankuri.com/components/angular2-datepicker</a></p>
  
  <p>Bug I get this bug:</p>
  
  <p><a href="https://i.stack.imgur.com/Bbnt5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Bbnt5.png" alt="enter image description here"></a></p>
  
  <p><strong>My current index.html file:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;base href="/"&gt;&lt;/base&gt;
  
      &lt;meta charset="UTF-8"&gt;      
      &lt;meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  
      &lt;link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32"&gt;
      &lt;link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96"&gt;
      &lt;link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="/css/animate.css" /&gt; 
      &lt;link rel="stylesheet" type="text/css" href="/bootstraptheme.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="/css/styles.css" /&gt; 
      &lt;link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="node_modules/moment/moment.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"&gt;&lt;/script&gt;   
  
      &lt;script&gt;
          System.config({
              transpiler: 'typescript',
              defaultJSExtensions: true,  
              typescriptOptions: {
                  emitDecoratorMetadata: true,
              },          
              packages: {
                  'angular2-google-maps': {
                    defaultExtension: 'js'
                  }
              },
              map: {
                  'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
                  'moment': 'node_modules/moment/moment.js'*/
              }
          });
  
      &lt;/script&gt;
  
  
      &lt;script src="/angular2_google_maps.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/router.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/http.js"&gt;&lt;/script&gt;  
  
      &lt;script src="/firebase/firebaseNew.js"&gt;&lt;/script&gt;
  
      &lt;!--&lt;script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"&gt;&lt;/script&gt;--&gt;
  
    &lt;/head&gt;
  
    &lt;body id="container"&gt;
  
      &lt;app&gt;&lt;/app&gt;
  
      &lt;script&gt;      
        System.import('/app/app.component');
      &lt;/script&gt;
  
      &lt;script&gt;
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-22148347-4', 'auto');
        ga('send', 'pageview');
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>