From b79689c487535bbafba741b0d653cdfddf74e9e0 Mon Sep 17 00:00:00 2001
From: Taras Mankovski <tarasm@gmail.com>
Date: Mon, 28 Mar 2016 14:09:24 -0700
Subject: [PATCH 1/5] Added the ability to highlight days

---
 addon/components/eui-interval.js              |  3 +-
 addon/helpers/moment-between.js               | 10 +++++
 addon/helpers/moment-same.js                  |  1 -
 .../templates/components/eui-day-selector.hbs |  1 +
 addon/tests/page-objects/day-selector.js      |  4 ++
 app/helpers/moment-between.js                 |  1 +
 tests/integration/eui-day-selector-test.js    | 44 ++++++++++++++++++-
 tests/integration/eui-interval-test.js        |  8 ++++
 tests/unit/helpers/moment-between-test.js     | 16 +++++++
 9 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 addon/helpers/moment-between.js
 create mode 100644 app/helpers/moment-between.js
 create mode 100644 tests/unit/helpers/moment-between-test.js

diff --git a/addon/components/eui-interval.js b/addon/components/eui-interval.js
index b36c70d..c2bf7e3 100644
--- a/addon/components/eui-interval.js
+++ b/addon/components/eui-interval.js
@@ -20,7 +20,8 @@ const EUIInterval = Ember.Component.extend({
     `is-selected:--is-selected`,
     `is-disabled:--is-disabled`,
     `is-now:--is-now`,
-    `is-empty:--is-empty`
+    `is-empty:--is-empty`,
+    'is-highlighted:--is-highlighted'
   ],
 
   format: computed('interval', function() {
diff --git a/addon/helpers/moment-between.js b/addon/helpers/moment-between.js
new file mode 100644
index 0000000..4b9f87a
--- /dev/null
+++ b/addon/helpers/moment-between.js
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export function momentIsBetween([date, start, end]/*, hash*/) {
+  if (!date) {
+    return;
+  }
+  return date.isBetween(start, end);
+}
+
+export default Ember.Helper.helper(momentIsBetween);
diff --git a/addon/helpers/moment-same.js b/addon/helpers/moment-same.js
index 28d56c4..957b950 100644
--- a/addon/helpers/moment-same.js
+++ b/addon/helpers/moment-same.js
@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import moment from 'moment';
 
 export function momentSame([date1, date2, unit]/*, hash*/) {
   if (!date1 || !date2) {
diff --git a/addon/templates/components/eui-day-selector.hbs b/addon/templates/components/eui-day-selector.hbs
index 40ab3ca..1495518 100644
--- a/addon/templates/components/eui-day-selector.hbs
+++ b/addon/templates/components/eui-day-selector.hbs
@@ -17,6 +17,7 @@
         {{eui-interval day 'day'
           is-selected=(moment-same selection day 'day')
           on-select=(action 'selectDay')
+          is-highlighted=(or (moment-between day start end) (moment-same day start) (moment-same day end))
         }}
       {{else}}
         {{#eui-interval day 'day'
diff --git a/addon/tests/page-objects/day-selector.js b/addon/tests/page-objects/day-selector.js
index 678a9c7..1ab8543 100644
--- a/addon/tests/page-objects/day-selector.js
+++ b/addon/tests/page-objects/day-selector.js
@@ -35,6 +35,10 @@ export default class DaySelector {
     let datetime = date.format(HTML5_DATETIME_FORMAT);
     return this.$(`.eui-interval[data-datetime="${datetime}"]`).hasClass('--is-selected');
   }
+  
+  highlighted() {
+    return this.$('.--is-highlighted').map(trimText).toArray();
+  }
 
   selectDay(day) {
     let datetime = day.format(HTML5_DATETIME_FORMAT);
diff --git a/app/helpers/moment-between.js b/app/helpers/moment-between.js
new file mode 100644
index 0000000..efa1644
--- /dev/null
+++ b/app/helpers/moment-between.js
@@ -0,0 +1 @@
+export { default, momentIsBetween } from 'eui-calendar/helpers/moment-between';
diff --git a/tests/integration/eui-day-selector-test.js b/tests/integration/eui-day-selector-test.js
index 58ad7ec..f2f8298 100644
--- a/tests/integration/eui-day-selector-test.js
+++ b/tests/integration/eui-day-selector-test.js
@@ -3,7 +3,7 @@ import hbs from 'htmlbars-inline-precompile';
 import moment from 'moment';
 import DaySelector from 'eui-calendar/tests/page-objects/day-selector';
 
-moduleForComponent('eui-day-selector', 'Integration | Component | Selectors | eui day', {
+moduleForComponent('eui-day-selector', 'Integration | Component | Selectors | eui day selector', {
   integration: true,
   beforeEach() {
     this.set('month', moment('August 2015'));
@@ -101,3 +101,45 @@ test('it should accept a selection date attribute', function(assert){
   assert.ok(this.$('.--is-selected:contains(14)').length, '14th is selected');
  
 });
+
+test('it should accept start and end arguments', function(assert){
+  
+  let date = moment('March 14, 2016');
+  let start = moment('March 10, 2016');
+  let end = moment('March 17, 2016');
+  
+  this.set('date', date);
+  this.set('start', start);
+  this.set('end', end);
+  
+  this.render(hbs`
+    {{#eui-day-selector date start=start end=end as |day|}}
+      {{eui-interval day 'day'
+        is-selected=(moment-same selection day 'day')
+        is-highlighted=(or (moment-between day start end) (moment-same day start) (moment-same day end))
+      }}
+    {{/eui-day-selector}} 
+  `);
+  
+  assert.equal(this.$('.--is-highlighted').length, 8, '8 days are highlighted');
+  assert.deepEqual(this.component.highlighted(), [ '10', '11', '12', '13', '14', '15', '16', '17' ], 'highlighted days');
+});
+
+test('it should highlight elements with default layout', function(assert){
+  
+  let date = moment('March 14, 2016');
+  let start = moment('March 10, 2016');
+  let end = moment('March 17, 2016');
+  
+  this.set('date', date);
+  this.set('start', start);
+  this.set('end', end);
+  
+  this.render(hbs`{{eui-day-selector date start=start end=end}}`);
+  
+  assert.equal(this.$('.--is-highlighted').length, 8, '8 days are highlighted');
+  assert.deepEqual(this.component.highlighted(), [ '10', '11', '12', '13', '14', '15', '16', '17' ], 'highlighted days');
+  
+});
+
+
diff --git a/tests/integration/eui-interval-test.js b/tests/integration/eui-interval-test.js
index ce4f083..fd5a92f 100644
--- a/tests/integration/eui-interval-test.js
+++ b/tests/integration/eui-interval-test.js
@@ -91,3 +91,11 @@ test('is-now class', function(assert) {
   this.set('now', Moment());
   assert.ok(this.component.isNow(), 'has is-now class when now property is now');
 });
+
+test('is-hightlighted class', function(assert){
+  
+  this.render(hbs`{{eui-interval moment 'day' is-highlighted=true}}`);
+  
+  assert.ok(this.$('.eui-interval').hasClass('--is-highlighted'), 'has is-highlighted class');
+  
+});
\ No newline at end of file
diff --git a/tests/unit/helpers/moment-between-test.js b/tests/unit/helpers/moment-between-test.js
new file mode 100644
index 0000000..459ff9f
--- /dev/null
+++ b/tests/unit/helpers/moment-between-test.js
@@ -0,0 +1,16 @@
+import { momentIsBetween } from '../../../helpers/moment-between';
+import { module, test } from 'qunit';
+import moment from 'moment';
+
+module('Unit | Helper | moment between');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let date = moment('March 14, 2016');
+  let start = moment('March 10, 2016');
+  let end = moment('March 17, 2016');
+
+  assert.ok(momentIsBetween([date, start, end]), `${date} is between ${start} and ${end}`);
+  
+  assert.notOk(momentIsBetween([start, date, end]), `${start} is not between ${date} and ${end}`);
+});

From 1cf0d71f97df87709aa67f04c1b14e6fe370ef58 Mon Sep 17 00:00:00 2001
From: Taras Mankovski <tarasm@gmail.com>
Date: Thu, 3 Mar 2016 07:11:24 -0500
Subject: [PATCH 2/5] DaySelector PageObject takes prefix passes tests

---
 addon/tests/page-objects/day-selector.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/addon/tests/page-objects/day-selector.js b/addon/tests/page-objects/day-selector.js
index 1ab8543..23d1dbf 100644
--- a/addon/tests/page-objects/day-selector.js
+++ b/addon/tests/page-objects/day-selector.js
@@ -2,38 +2,39 @@ import Ember from 'ember';
 import { HTML5_DATETIME_FORMAT } from 'eui-calendar/constants';
 
 export default class DaySelector {
-  constructor(env) {
+  constructor(env, prefix = '') {
     this.env = env;
+    this.prefix = prefix;
     this.$ = this.env.$;
   }
 
   emptyCount() {
-    return this.$('.eui-interval.--is-empty').length;
+    return this.$(`${this.prefix}.eui-interval.--is-empty`).length;
   }
 
   notEmptyCount() {
-    return this.$('.eui-interval').not('.--is-empty').length;
+    return this.$(`${this.prefix}.eui-interval`).not('.--is-empty').length;
   }
 
   disabledCount() {
-    return this.$('.eui-interval.--is-disabled').length;
+    return this.$(`${this.prefix}.eui-interval.--is-disabled`).length;
   }
 
   notDisabledCount() {
-    return this.$('.eui-interval').not('.--is-disabled').length;
+    return this.$(`${this.prefix}.eui-interval`).not('.--is-disabled').length;
   }
 
   days() {
-    return this.$('.eui-interval').map(trimText).toArray();
+    return this.$(`${this.prefix}.eui-interval`).map(trimText).toArray();
   }
 
   headers() {
-    return this.$('.eui-nameofday').map(trimText).toArray();
+    return this.$(`${this.prefix}.eui-nameofday`).map(trimText).toArray();
   }
 
   isSelected(date) {
     let datetime = date.format(HTML5_DATETIME_FORMAT);
-    return this.$(`.eui-interval[data-datetime="${datetime}"]`).hasClass('--is-selected');
+    return this.$(`${this.prefix}.eui-interval[data-datetime="${datetime}"]`).hasClass('--is-selected');
   }
   
   highlighted() {
@@ -42,7 +43,7 @@ export default class DaySelector {
 
   selectDay(day) {
     let datetime = day.format(HTML5_DATETIME_FORMAT);
-    this.$(`.eui-interval[data-datetime="${datetime}"]`).click();
+    this.$(`${this.prefix}.eui-interval[data-datetime="${datetime}"]`).click();
   }
 }
 

From 74a7e135338c8ddbce0c40bdeb2e260e79f8a531 Mon Sep 17 00:00:00 2001
From: Taras Mankovski <tarasm@gmail.com>
Date: Thu, 3 Mar 2016 08:38:31 -0500
Subject: [PATCH 3/5] Updated tests after writing the code

---
 tests/integration/eui-selectdate-test.js | 174 +++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 tests/integration/eui-selectdate-test.js

diff --git a/tests/integration/eui-selectdate-test.js b/tests/integration/eui-selectdate-test.js
new file mode 100644
index 0000000..62ab00e
--- /dev/null
+++ b/tests/integration/eui-selectdate-test.js
@@ -0,0 +1,174 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Moment from 'moment';
+import DaySelector from 'eui-calendar/tests/page-objects/day-selector';
+
+const FORMAT = 'MMMM YYYY';
+
+moduleForComponent('eui-selectdate', 'Integration | Component | eui selectdate', {
+  integration: true,
+  beforeEach() {
+    this.currentMonth = new DaySelector(this, '.eui-selectdate--current-month ');
+    this.nextMonth = new DaySelector(this, '.eui-selectdate--next-month ');
+  }
+});
+
+test('it should render', function (assert){
+
+  this.render(hbs`{{eui-selectdate}}`);
+
+  assert.ok(this.$('eui-selectdate').length, 'eui-selectdate was rendered');
+});
+
+test('it should show button opens calendar on click', function (assert) {
+  
+  this.render(hbs`{{eui-selectdate}}`);
+  
+  assert.ok(this.$('.eui-selectdate--trigger').length, 'button.eui-selectdate--trigger is visible');
+  assert.notOk(this.$('.eui-selectdate--window').length, '.eui-selectdate--window is not visible');
+  
+  this.$('.eui-selectdate--trigger').click();
+  assert.ok(this.$('.eui-selectdate--window').length, 'selectdate window is visible');
+});
+
+test('it should open with isOpen parameter', function(assert){
+  
+  this.render(hbs`{{eui-selectdate isOpen=true}}`);
+  
+  this.$('.eui-selectdate--trigger').click();
+  assert.ok(this.$('.eui-selectdate--window').length, 'selectdate window is visible');
+});
+
+test('it should show default placeholder text', function(assert){
+  
+  this.render(hbs`{{eui-selectdate}}`);
+  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'Select a date', 'Default placeholder is Select a date');
+});
+
+test('it should allow to specify placeholder text', function(assert){
+
+  this.render(hbs`{{eui-selectdate placeholder='Choose a date'}}`);
+  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'Choose a date', 'Placeholder text is changed to Choose a date');    
+});
+
+test('it should accept passed in date', function (assert){
+  
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date=date isOpen=true}}`);
+  
+  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'January 21', 'selected date is shown on the trigger');
+  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), 'January 2014', 'current calendar shows January 2014');
+  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), 'February 2014', 'next calendar shows February 2014');
+});
+
+test('it should use date at render as default date', function(assert) {
+
+  let now = Moment().utc();
+  let nowLabel = now.format(FORMAT);
+  let nextMonth = now.add(1, 'month');
+  let nextMonthLabel = nextMonth.format(FORMAT);
+  
+  this.render(hbs`{{eui-selectdate isOpen=true}}`);
+  
+  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), nowLabel, 'current calendar shows this month');
+  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), nextMonthLabel, 'next calendar shows next month');
+});
+
+test('it should accept date as first positional argument', function (assert){
+
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date isOpen=true}}`);
+  
+  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'January 21', 'selected date is shown on the trigger');
+});
+
+test('it should go back one month when previous button is clicked', function (assert) {
+  
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date isOpen=true}}`);
+  
+  this.$('.eui-selectdate--previous').click();
+  
+  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), 'December 2013', 'current calendar shows December 2013');
+  assert.deepEqual(this.currentMonth.days(), [
+    '1',  '2',   '3',  '4',  '5',  '6',  '7',  
+    '8',  '9',  '10', '11', '12', '13', '14', 
+    '15', '16', '17', '18', '19', '20', '21', 
+    '22', '23', '24', '25', '26', '27', '28', 
+    '29', '30', '31',   '',   '',   '',  '', 
+    '',   '',   '',     '',   '',   '',   ''
+  ], 'Days for December 2013 are shown in the calendar');
+  
+  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), 'January 2014', 'next calendar shows January 2014');  
+  assert.deepEqual(this.nextMonth.days(), [
+    '',    '',   '',   '1', '2',   '3',  '4',  
+    '5',  '6',  '7',  '8',  '9',  '10', '11', 
+    '12', '13', '14', '15', '16', '17', '18', 
+    '19', '20', '21', '22', '23', '24', '25', 
+    '26', '27', '28', '29', '30',  '31', '', 
+    '',   '',   '',     '',   '',   '',   ''
+  ], 'Days for January 2014 are shown in the calendar');
+  
+});
+
+test('it should go forward one month when next button is clicked', function (assert) {
+  
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date isOpen=true}}`);
+  
+  this.$('.eui-selectdate--next').click();
+  
+  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), 'February 2014', 'current calendar shows February 2014');
+  assert.deepEqual(this.currentMonth.days(), [
+    '',    '',   '',   '',   '',  '',   '1',
+    '2',   '3',  '4',  '5',  '6',  '7',  '8',
+    '9',  '10', '11', '12', '13', '14', '15',
+    '16', '17', '18', '19', '20', '21', '22',
+    '23', '24', '25', '26', '27', '28', '', 
+    '',   '',   '',     '',   '',   '',   ''
+  ], 'Days for February 2014 are shown in the calendar');
+
+  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), 'March 2014', 'next calendar shows March 2014');  
+  assert.deepEqual(this.nextMonth.days(), [
+    '',    '',   '',   '',   '',  '',   '1',
+    '2',   '3',  '4',  '5',  '6',  '7',  '8',
+    '9',  '10', '11', '12', '13', '14', '15',
+    '16', '17', '18', '19', '20', '21', '22',
+    '23', '24', '25', '26', '27', '28', '29',
+    '30',  '31', '',   '',    '',   '',  ''
+  ], 'Days for March 2014 are shown in the calendar');
+  
+});
+
+test('it should send on-select action when selection is made', function(assert){
+  
+  let date = Moment('January 21, 2014');
+  
+  this.set('date', date);
+  
+  let selection;
+  this.on('selection', function (date){
+    selection = date.format('DD/MM/YYYY');
+  });
+  
+  this.render(hbs`{{eui-selectdate date isOpen=true on-select='selection'}}`);
+
+  this.currentMonth.selectDay(Moment('January 17, 2014'));
+  assert.equal(selection, '17/01/2014', 'Selected January 17, 2014 from current month');
+  
+  this.nextMonth.selectDay(Moment('February 14, 2014'));
+  assert.equal(selection, '14/02/2014', 'Selected Feburary 14, 2014 from next month');
+  
+});

From d2973f6d6b86163e464ba0248eb550a5a0ff6000 Mon Sep 17 00:00:00 2001
From: Taras Mankovski <tarasm@gmail.com>
Date: Thu, 3 Mar 2016 09:38:29 -0500
Subject: [PATCH 4/5] More refinments to the test

---
 tests/integration/eui-selectdate-test.js | 57 +++++++++++++++++++++---
 1 file changed, 52 insertions(+), 5 deletions(-)

diff --git a/tests/integration/eui-selectdate-test.js b/tests/integration/eui-selectdate-test.js
index 62ab00e..4b13de3 100644
--- a/tests/integration/eui-selectdate-test.js
+++ b/tests/integration/eui-selectdate-test.js
@@ -20,7 +20,7 @@ test('it should render', function (assert){
   assert.ok(this.$('eui-selectdate').length, 'eui-selectdate was rendered');
 });
 
-test('it should show button opens calendar on click', function (assert) {
+test('it should show button to open selectdate window', function (assert) {
   
   this.render(hbs`{{eui-selectdate}}`);
   
@@ -59,9 +59,19 @@ test('it should accept passed in date', function (assert){
   
   this.render(hbs`{{eui-selectdate date=date isOpen=true}}`);
   
-  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'January 21', 'selected date is shown on the trigger');
-  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), 'January 2014', 'current calendar shows January 2014');
-  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), 'February 2014', 'next calendar shows February 2014');
+  assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'January 21', 'passed in date is shown on the trigger');
+});
+
+test('it should show current and next months to choose from', function(assert) {
+  
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date=date isOpen=true}}`);
+  
+  assert.equal(this.$('.eui-selectdate--current-month-name').text().trim(), 'January 2014', 'current calendar shows passed in date');
+  assert.equal(this.$('.eui-selectdate--next-month-name').text().trim(), 'February 2014', 'next calendar shows next month');
 });
 
 test('it should use date at render as default date', function(assert) {
@@ -88,6 +98,44 @@ test('it should accept date as first positional argument', function (assert){
   assert.equal(this.$('.eui-selectdate--trigger').text().trim(), 'January 21', 'selected date is shown on the trigger');
 });
 
+test('it should render current and next month calendars', function (assert){
+
+  let date = Moment('January 21, 2014').utc();
+  
+  this.set('date', date);
+  
+  this.render(hbs`{{eui-selectdate date isOpen=true}}`);
+  
+  assert.deepEqual(this.currentMonth.days(), [
+    '',    '',   '',   '1', '2',   '3',  '4',  
+    '5',  '6',  '7',  '8',  '9',  '10', '11', 
+    '12', '13', '14', '15', '16', '17', '18', 
+    '19', '20', '21', '22', '23', '24', '25', 
+    '26', '27', '28', '29', '30',  '31', '', 
+    '',   '',   '',     '',   '',   '',   ''
+  ], 'Days for January 2014 are shown in the calendar');
+  
+    assert.deepEqual(this.nextMonth.days(), [
+    '',    '',   '',   '',   '',  '',   '1',
+    '2',   '3',  '4',  '5',  '6',  '7',  '8',
+    '9',  '10', '11', '12', '13', '14', '15',
+    '16', '17', '18', '19', '20', '21', '22',
+    '23', '24', '25', '26', '27', '28', '', 
+    '',   '',   '',     '',   '',   '',   ''
+  ], 'Days for February 2014 are shown in the calendar');
+  
+});
+
+test('it should render next and previous buttons', function(assert) {
+  this.render(hbs`{{eui-selectdate isOpen=true}}`);
+  
+  assert.ok(this.$('button.eui-selectdate--next').length, 'next button is rendered');
+  assert.equal(this.$('button.eui-selectdate--next').text().trim(), '>>' /* &gt;&gt; */, 'next button shows >> arrow');
+  
+  assert.ok(this.$('.eui-selectdate--previous').length, 'previous button is rendered');
+  assert.equal(this.$('button.eui-selectdate--previous').text().trim(), '<<' /** &lt;&lt; */, 'previous button shows << arrow');
+});
+
 test('it should go back one month when previous button is clicked', function (assert) {
   
   let date = Moment('January 21, 2014').utc();
@@ -117,7 +165,6 @@ test('it should go back one month when previous button is clicked', function (as
     '26', '27', '28', '29', '30',  '31', '', 
     '',   '',   '',     '',   '',   '',   ''
   ], 'Days for January 2014 are shown in the calendar');
-  
 });
 
 test('it should go forward one month when next button is clicked', function (assert) {

From 019b85e2bfd4cd0cfd9313817e9f63b72ece4f0e Mon Sep 17 00:00:00 2001
From: Taras Mankovski <tarasm@gmail.com>
Date: Wed, 9 Mar 2016 19:24:35 -0500
Subject: [PATCH 5/5] Added the code

---
 .vscodeignore                                 | 10 +++++
 README.md                                     | 33 ---------------
 addon/components/eui-selectdate.js            | 40 +++++++++++++++++++
 addon/templates/components/eui-selectdate.hbs | 16 ++++++++
 app/components/eui-selectdate.js              |  1 +
 jsconfig.json                                 |  1 +
 tests/dummy/app/templates/application.hbs     |  2 +
 tests/integration/eui-selectdate-test.js      |  4 +-
 8 files changed, 72 insertions(+), 35 deletions(-)
 create mode 100644 .vscodeignore
 create mode 100644 addon/components/eui-selectdate.js
 create mode 100644 addon/templates/components/eui-selectdate.hbs
 create mode 100644 app/components/eui-selectdate.js
 create mode 100644 jsconfig.json

diff --git a/.vscodeignore b/.vscodeignore
new file mode 100644
index 0000000..5f5fbfe
--- /dev/null
+++ b/.vscodeignore
@@ -0,0 +1,10 @@
+dist/**
+tmp/**
+build/**
+cache/**
+node_modules/**
+bower_components/**
+.sass-cache/**
+connect.lock/**
+coverage/*/**
+libpeerconnection.log
\ No newline at end of file
diff --git a/README.md b/README.md
index c500e62..e69de29 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +0,0 @@
-[![Build Status](https://travis-ci.org/LocusEnergy/eui-calendar.svg?branch=master)](https://travis-ci.org/LocusEnergy/eui-calendar)
-
-# Eui-calendar
-
-This README outlines the details of collaborating on this Ember addon.
-
-## Installation
-
-* `git clone` this repository
-* `npm install`
-* `bower install`
-
-## Running
-
-* `ember server`
-* Visit your app at http://localhost:4200.
-
-## Running Tests
-
-* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
-* `ember test`
-* `ember test --server`
-
-## Building
-
-* `ember build`
-
-For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
-
-
-Questions / TODO:
-- remove 'eui' prefix from the internal components?
-- add warning if moment isn't defined in each selector? (for example: `return momentDecade(this.get('decade'), 'YYYY')` in year-selector)
diff --git a/addon/components/eui-selectdate.js b/addon/components/eui-selectdate.js
new file mode 100644
index 0000000..946db4c
--- /dev/null
+++ b/addon/components/eui-selectdate.js
@@ -0,0 +1,40 @@
+import Ember from 'ember';
+import layout from '../templates/components/eui-selectdate';
+import Moment from 'moment';
+
+const {
+  computed
+} = Ember;
+
+let EUISelectdateComponent = Ember.Component.extend({
+  layout,
+  tagName: 'eui-selectdate',
+  placeholder: 'Select a date',
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.set('_date', this.get('date') || Moment());
+  },
+  nextMonth: computed('_date', function(){
+    return this.get('_date').clone().add(1, 'month');
+  }),
+  actions: {
+    open() {
+      this.set('isOpen', true);
+    },
+    next(date) {
+      this.set('_date', date.clone().add(1, 'month'));
+    },
+    previous(date) {
+      this.set('_date', date.clone().subtract(1, 'month'));
+    },
+    select(date) {
+      this.sendAction('on-select', date);
+    }
+  }
+});
+
+EUISelectdateComponent.reopenClass({
+  positionalParams: ['date']
+});
+
+export default EUISelectdateComponent;
\ No newline at end of file
diff --git a/addon/templates/components/eui-selectdate.hbs b/addon/templates/components/eui-selectdate.hbs
new file mode 100644
index 0000000..51379e0
--- /dev/null
+++ b/addon/templates/components/eui-selectdate.hbs
@@ -0,0 +1,16 @@
+<button class="eui-selectdate--trigger" {{action 'open'}}>{{if date (moment-format date 'MMMM D') placeholder}}</button>
+
+{{#if isOpen}}
+<div class="eui-selectdate--window">
+  <button class="eui-selectdate--next" {{action 'next' _date}}>&gt;&gt;</button>
+  <button class="eui-selectdate--previous" {{action 'previous' _date}}>&lt;&lt;</button>
+  <div class="eui-selectdate--current-month">
+    <div class="eui-selectdate--current-month-name">{{moment-format _date 'MMMM YYYY'}}</div>
+    {{eui-day-selector _date on-select='select'}}
+  </div>
+  <div class="eui-selectdate--next-month">
+      <div class="eui-selectdate--next-month-name">{{moment-format nextMonth 'MMMM YYYY'}}</div>
+    {{eui-day-selector nextMonth on-select='select'}}
+  </div>
+</div>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/eui-selectdate.js b/app/components/eui-selectdate.js
new file mode 100644
index 0000000..9dc624f
--- /dev/null
+++ b/app/components/eui-selectdate.js
@@ -0,0 +1 @@
+export { default } from 'eui-calendar/components/eui-selectdate';
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..49d404a
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1 @@
+{"compilerOptions":{"target":"es6","experimentalDecorators":true}}
\ No newline at end of file
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 2cc6207..2b646a8 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,3 +1,5 @@
 <h4>eui-calendar</h4>
 
 {{eui-calendar}}
+
+{{eui-selectdate}}
\ No newline at end of file
diff --git a/tests/integration/eui-selectdate-test.js b/tests/integration/eui-selectdate-test.js
index 4b13de3..b2f1a70 100644
--- a/tests/integration/eui-selectdate-test.js
+++ b/tests/integration/eui-selectdate-test.js
@@ -5,7 +5,7 @@ import DaySelector from 'eui-calendar/tests/page-objects/day-selector';
 
 const FORMAT = 'MMMM YYYY';
 
-moduleForComponent('eui-selectdate', 'Integration | Component | eui selectdate', {
+moduleForComponent('eui-selectdate', 'Integration | Component | eui-selectdate', {
   integration: true,
   beforeEach() {
     this.currentMonth = new DaySelector(this, '.eui-selectdate--current-month ');
@@ -115,7 +115,7 @@ test('it should render current and next month calendars', function (assert){
     '',   '',   '',     '',   '',   '',   ''
   ], 'Days for January 2014 are shown in the calendar');
   
-    assert.deepEqual(this.nextMonth.days(), [
+  assert.deepEqual(this.nextMonth.days(), [
     '',    '',   '',   '',   '',  '',   '1',
     '2',   '3',  '4',  '5',  '6',  '7',  '8',
     '9',  '10', '11', '12', '13', '14', '15',