New Twiddle

controllers.application.js

import Ember from 'ember';

import Controller from 'ember-controller';
import moment from 'moment';

export default Ember.Controller.extend({
  appName: 'ember twiddle',
  
  
  months: moment.months(),
  years: Array(...Array(80)).map((_, i) => `${i + 1940}`),
  //selected: moment(new Date(2011,2,12)),
  selected: moment('4/30/2016', 'MM/DD/YYYY'),
  
  
  names: ['Stefan', 'Miguel', 'Tomster', 'Pluto'],
  actions: {
    foo(name) {
      this.set('destination', name);
    },
    

    /*Start: date picker action*/
    changeCenter2(unit, calendar, val) {
      let newCenter = calendar.center.clone()[unit](val);
      calendar.actions.changeCenter(newCenter);
    }
    /*End: date picker action*/
  },
  
  
});

styles.app.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  font-family: Arial, sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
  background: #ededed;
  font-size: 14px;
  line-height: 16px;
  width:374px; height:667px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.wrapper{ margin: 0 20px;}
.mobile{ width:374px; height:667px; background:#fff; padding:5px; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

h1{ font-size: 18px; line-height: 22px; font-weight: bold; margin: 10px 0;}
h2{ font-size: 16px; line-height: 18px; font-weight: bold; margin: 0 0 10px;}
h3{ font-weight: bold;}
p{ }
header{ color:#fff; background: #1e4a91; padding: 5px 15px; height: 40px; margin: 10px 0; border-radius: 3px;}


.sub-txt{ color: #777;}
input[type="text"], input[type="file"]{ padding: 0 5px; box-sizing:border-box; width: 100%; height: 35px; font-size: 13px; border: 1px solid rgb(158, 158, 158); border-radius: 3px;}
.btn{ width: 70px; height: 25px; border-radius: 3px; border: none; background: #1e4a91; color: #fff; font-size: 13px; margin-left: 10px;}
.btn:hover{ background: #3460a8; text-shadow: 1px 1px #000;}

.form-field{ position: relative; padding: 0 5px; height: 35px; font-size: 13px; border: 1px solid rgb(158, 158, 158); border-radius: 3px; margin: 5px 0;}

.textinput-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
}

.hidden {
    display: none !important;
}

.clearfix:before,
.clearfix:after,
.row:after{
  display: table;
  content: " ";
}
.clearfix:after,
.row:after{
  clear: both;
}
.row{ margin-bottom:15px;}


body {
  /*margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;*/
}

.ember-power-select-trigger{ 
  border: 1px solid rgb(158, 158, 158);
}

.date-picker{ border: 1px solid #ccc; margin-top:15px;}
.date-picker input{background: url(https://cdn0.iconfinder.com/data/icons/octicons/1024/calendar-32.png) 100% 50% no-repeat;}
.ember-power-calendar-nav{ text-align: center; }

.ember-power-calendar-nav button, .ember-power-calendar-nav .ember-power-calendar-nav-title, .ember-power-calendar-nav .ember-basic-dropdown-trigger{
  display: inline-block;

}
.ember-power-calendar-day-grid{ margin: 0 0 0 5px;}
.ember-power-calendar-weekdays{ display: inline-block; height:15px; margin:10px 0 10px 5px; text-align: center}

.ember-power-calendar-weekday{ display: inline-block; width: 45px;}

button.ember-power-calendar-day{ width:45px; height:25px; margin:0 0 5px;}

button.ember-power-calendar-day.ember-power-calendar-day--current-month{ color:#656D78;}
button.ember-power-calendar-day.ember-power-calendar-day--other-month{ color: #bbb;}

templates.application.hbs

{{#basic-dropdown as |dropdown|}}
  <input type="text"
    data-ebd-id="{{dropdown.uniqueId}}-trigger"
    class="datepicker-demo-input"
    onclick={{dropdown.actions.toggle}}
    value={{if selected (moment-format selected 'DD-MM-YYYY')}}
    readonly>

  {{#dropdown.content class="datepicker-demo-dropdown"}}
    {{#power-calendar class="demo-calendar-small"
      center=center
      onCenterChange=(action (mut center) value="date")
      selected=selected
      onSelect=(action (mut selected) value="date") as |calendar|}}
      {{calendar.nav}}
      {{calendar.days}}
    {{/power-calendar}}
  {{/dropdown.content}}
{{/basic-dropdown}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-power-select": "1.6.1",
    "ember-power-calendar": "0.3.1",
    "ember-plupload": "1.13.19"
  }
}