pikaday using input type="date"

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  date: null
});

templates.application.hbs

<h1>Datepicker using &#x3C;input type="date"&#x3E;</h1>
<p>
	Customized different datepickers to use an &#x3C;input type="date"&#x3E; instead of &#x3C;input type="text"&#x3E; for better a11y.
</p>
<h2>ember-pikaday</h2>
<p>
	Select a date: {{pikaday-input type="date" format="YYYY-MM-DD" value=(moment-format date 'YYYY-MM-DD' allow-empty=true) onSelection=(action (mut date))}}<br>
	Selected date: {{date}}
</p>
<ul>
  <li>Keyboard input is broken due to upstream issue: <a href="https://github.com/dbushell/Pikaday/issues/493">https://github.com/dbushell/Pikaday/issues/493</a></li>
</ul>

<h2>ember-power-datepicker</h2>
<p>
	Select a date:
  {{#power-datepicker selected=date onSelect=(action (mut date) value="date") renderInPlace=true as |dp|}}
    {{#dp.trigger tabindex="-1"}}
      <input type="date" class="my-input-class" readonly value={{moment-format date 'YYYY-MM-DD' allow-empty=true}}>
    {{/dp.trigger}}

    {{#dp.content class="demo-datepicker-small"}}
      {{dp.nav}}
      {{dp.days}}
    {{/dp.content}}
  {{/power-datepicker}}<br>
  Selected date: {{date}}
</p>
<ul>
  <li>Not styled cause styles require CSS preprozessor.</li>
  <li>Keyboard input is not working at all.</li>
  <li>Datepicker is closed if clicked on input multiple times (e.g. change focus from day to month).</li>
</ul>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0",
    "ember-pikaday": "2.2.2",
    "ember-cli-moment-shim": "3.7.1",
    "ember-power-datepicker": "0.5.2"
  }
}