Datepicker: Ember Power Datepicker v0.2.2

controllers.application.js

import Ember from 'ember';
import moment from 'moment';

let today = moment();

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

styles.app.css

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

/* ember-basic-dropdown START */
.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown, .ember-basic-dropdown-content, .ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #FFF;
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}
/* ember-basic-dropdown END */



/* ember-power-calendar START */
.ember-power-calendar {
  box-sizing: border-box;
  position: relative;
}

.ember-power-calendar-nav {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.ember-power-calendar-nav * {
  box-sizing: border-box;
}

.ember-power-calendar-days, .ember-power-calendar-days * {
  box-sizing: border-box;
}

.ember-power-calendar-nav-title {
  flex: 1;
  text-align: center;
}

.ember-power-calendar-row {
  display: flex;
  justify-content: space-between;
}

.ember-power-calendar-weekday {
  -webkit-appearance: none;
  flex: 1 1 100%;
  padding: 0;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 0;
}

.ember-power-calendar-day {
  -webkit-appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  flex: 1 1 100%;
  font-size: inherit;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ember-power-calendar-nav-control {
  -webkit-appearance: none;
  background-color: transparent;
  background-color: initial;
  border: none;
  border: initial;
  outline: none;
  outline: initial;
  font-size: inherit;
}

.ember-power-calendar {
  font-size: 14px;
  line-height: 1.42857;
}

.ember-power-calendar-weekdays {
  color: #333333;
}

.ember-power-calendar-day {
  color: #bbb;
}

.ember-power-calendar-nav {
  line-height: 2;
}

.ember-power-calendar-nav-control {
  line-height: 1;
  font-size: 150%;
  color: #0078c9;
}
.ember-power-calendar-nav-control:focus {
  transform: scale(1.2);
  color: #0096fc;
}

.ember-power-calendar-day--current-month {
  color: #656D78;
  background-color: #F5F7FA;
}

.ember-power-calendar-day--today,
.ember-power-calendar-day:not([disabled]):hover {
  background-color: #eee;
}

.ember-power-calendar-day--other-month:not([disabled]):hover {
  color: #aaa;
}

.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
  font-weight: bold;
  background-color: #c9e9ff;
  color: #656D78;
}

.ember-power-calendar-day--selected.ember-power-calendar-day--range-start,
.ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
  background-color: #96d5ff;
}
.ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover,
.ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
  background-color: #96d5ff;
}

.ember-power-calendar-day--focused {
  box-shadow: inset 0px -2px 0px 0px #0078c9;
}

.ember-power-calendar-day--interactive[disabled] {
  opacity: 0.4;
}

.demo-calendar-small {
  width: 222px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: 32px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: 64px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: 96px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: 128px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: 160px;
}
.demo-calendar-small .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: 192px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: 32px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: 64px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: 96px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: 128px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: 160px;
}
.demo-calendar-small .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: 192px;
}
.demo-calendar-small .ember-power-calendar-day, .demo-calendar-small .ember-power-calendar-weekday {
  max-width: 30px;
  max-height: 30px;
  width: 30px;
  height: 30px;
}
.demo-calendar-small .ember-power-calendar-weekdays, .demo-calendar-small .ember-power-calendar-week {
  height: 32px;
  padding-left: 0;
  padding-right: 0;
}

.demo-calendar-medium {
  width: 362px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: 52px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: 104px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: 156px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: 208px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: 260px;
}
.demo-calendar-medium .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: 312px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: 52px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: 104px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: 156px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: 208px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: 260px;
}
.demo-calendar-medium .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: 312px;
}
.demo-calendar-medium .ember-power-calendar-day, .demo-calendar-medium .ember-power-calendar-weekday {
  max-width: 50px;
  max-height: 50px;
  width: 50px;
  height: 50px;
}
.demo-calendar-medium .ember-power-calendar-weekdays, .demo-calendar-medium .ember-power-calendar-week {
  height: 52px;
  padding-left: 0;
  padding-right: 0;
}

.demo-calendar-big {
  width: 502px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="1"] {
  padding-left: 72px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="2"] {
  padding-left: 144px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="3"] {
  padding-left: 216px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="4"] {
  padding-left: 288px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="5"] {
  padding-left: 360px;
}
.demo-calendar-big .ember-power-calendar-week:first-child[data-missing-days="6"] {
  padding-left: 432px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="1"] {
  padding-right: 72px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="2"] {
  padding-right: 144px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="3"] {
  padding-right: 216px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="4"] {
  padding-right: 288px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="5"] {
  padding-right: 360px;
}
.demo-calendar-big .ember-power-calendar-week:last-child[data-missing-days="6"] {
  padding-right: 432px;
}
.demo-calendar-big .ember-power-calendar-day, .demo-calendar-big .ember-power-calendar-weekday {
  max-width: 70px;
  max-height: 70px;
  width: 70px;
  height: 70px;
}
.demo-calendar-big .ember-power-calendar-weekdays, .demo-calendar-big .ember-power-calendar-week {
  height: 72px;
  padding-left: 0;
  padding-right: 0;
}
/* ember-power-calendar END */

templates.application.hbs

<h2>Datepicker: <small>[email protected]</small></h2>

<code>DEBUG VARS:</code>
<p>center={{center}}</p>
<p>selected={{selected}}</p>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at sodales tortor. Nam hendrerit eleifend ligula ut pretium. Fusce at neque pharetra, mollis nisi ut, tempus augue. Nullam purus diam, tempor sed odio vitae, auctor varius felis. Proin bibendum eleifend felis. Nunc venenatis euismod neque in consectetur. Aenean in aliquam neque. Suspendisse leo sem, molestie ut aliquam in, tristique eu erat. Mauris in lectus ex. Nam at nisi eu risus molestie porta nec sed tortor. Fusce laoreet mi justo, placerat porta est egestas at.</p>

<p>Sed lacus turpis, cursus et tortor a, faucibus interdum justo. Proin et sollicitudin orci. Proin enim lorem, egestas eu placerat vitae, lobortis semper orci. Vivamus ac sapien eget orci efficitur porta non eu ex. Maecenas ultricies ligula tortor, sed molestie arcu semper eget. Suspendisse porttitor non lorem ut hendrerit. Quisque sit amet sapien ex. Phasellus rutrum nisl nec mattis viverra.</p>

{{#power-datepicker
    verticalPosition="below"
    center=center
		selected=selected
    onSelect=(action (mut selected) value="date") as |dp|}}
  {{#dp.trigger tabindex="-1" style="display: inline-block;"}}
    <input type="text" class="form-control" readonly value={{moment-format selected 'MM-DD-YYYY'}}>
  {{/dp.trigger}}

  {{#dp.content class="dropdown-menu demo-calendar-small"}}
    {{dp.nav}}
    {{#dp.days as |day|}}
      {{#with (moment-format day.date 'ddd') as |weekday|}}
        {{#if (or (eq weekday "Sat") (eq weekday "Sun"))}}
          <strong style="color:red;">{{day.number}}</strong>
        {{else}}
          {{day.number}}
        {{/if}}
      {{/with}}
    {{/dp.days}}
  {{/dp.content}}
{{/power-datepicker}}

<p>Donec efficitur pretium elit, in dapibus orci molestie quis. Etiam porta et orci quis consequat. Nulla eget facilisis arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum et placerat mi. Nulla scelerisque, quam non ultrices placerat, turpis nunc congue mauris, porta imperdiet dolor ante ut ipsum. Pellentesque a lacus pretium massa placerat elementum ac nec nulla. Nunc efficitur finibus convallis. Mauris dictum ligula leo, ac tempor nunc luctus nec. Aliquam erat volutpat. Sed et feugiat odio. Etiam hendrerit lacus nulla, ut placerat magna elementum nec. In ornare tristique posuere. Proin ligula ex, luctus et sem sed, efficitur ultricies massa. Nullam sit amet cursus massa.</p>

<p>Aliquam eu pulvinar lorem, at lobortis nisl. Nam ultrices turpis in iaculis luctus. Donec id venenatis felis, vel vehicula ex. Vestibulum rhoncus, orci sit amet congue semper, tellus lectus sagittis erat, quis tempus magna velit convallis eros. Duis eget tempor risus. Nunc rutrum iaculis fringilla. Cras at condimentum lorem. Ut imperdiet libero eu quam maximus, facilisis scelerisque felis hendrerit. Vestibulum placerat odio ac quam hendrerit malesuada. Donec accumsan rhoncus placerat. Nam accumsan ac arcu ac euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

<p>In a metus dapibus, ultricies ligula nec, ultricies libero. Morbi risus ante, dapibus dapibus orci et, scelerisque ornare ante. Duis rhoncus semper velit, id gravida mauris volutpat et. Nullam iaculis, tortor quis aliquam bibendum, lorem velit scelerisque velit, at blandit sapien tortor ut justo. Cras sit amet augue mattis, lacinia eros id, aliquam lorem. In nec metus sed magna pellentesque imperdiet. Morbi arcu lacus, rutrum non quam luctus, scelerisque dictum urna. Sed ornare, nunc ac tincidunt ornare, massa justo sodales lectus, a eleifend sem libero non mauris. Donec gravida ipsum massa, sit amet pulvinar nisl tincidunt sed.</p>

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-datepicker": "0.2.2",
    "ember-moment": "7.0.1",
    "ember-composable-helpers": "2.0.1",
    "ember-truth-helpers": "1.3.0"
  }
}