ember-pikaday

application.controller.js

import Ember from 'ember';

const {
 set
} = Ember;

export default Ember.Controller.extend({
  appName: 'ember-pikaday',
  value1: new Date(),
  value2: new Date('2018-3-20'),
  value3: new Date(),
  value4: null,
  minDate: new Date('2018-3-15'),
  maxDate: new Date('2018-3-25'),
  
  actions: {    
    clearDate() {
      set(this, 'value1', null);
    }
  }
});

application.template.hbs

<div class="container">

	{{!-- Basic --}}
	<div class="row mb-5">
    <div class="col-12">
      <h4>Basic Pikaday Datepicker</h4>
      {{pikaday-input
      	value=value1
        class="form-control"
        format="MM/DD/YYYY"
        onSelection=(action (mut value1))
      }}
      <div class="mt-2">{{value1}}</div>
    </div>
  </div>
  
  {{!-- Read-only w/clear --}}
  <div class="row mb-5">
  	<div class="col-12">
    	<h4>Read-Only with Clear Button</h4>
      <div class="input-group">
        {{pikaday-input
        	value=value1
          class="form-control"
          format="MMMM Do, YYYY"
          onSelection=(action (mut value1))
          readonly=true
        }}
        {{#if value1}}
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" {{action "clearDate"}}>
            	Clear
            </button>
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  
  {{!-- Custom date/year ranges --}}
  <div class="row mb-5">
  	<div class="col-12">
    	<h4>Restricted Date &amp; Year Ranges</h4>
      <div class="row">
      	<div class="col-6">
        	{{pikaday-input
            value=value2
            class="form-control"
            format="MMM D YYYY"
            onSelection=(action (mut value2))
            minDate=minDate
            maxDate=maxDate
          }}
          <div class="small text-muted">Limited to Mar 15 - Mar 25</div>
        </div>
        <div class="col-6">
        	{{pikaday-input
            value=value3
            class="form-control"
            format="MMM D YYYY"
            onSelection=(action (mut value3))
            yearRange="1900,currentYear"
          }}
          <div class="small text-muted">Custom year range of 1900 - current</div>
        </div>
      </div>
    </div>
  </div>
  
  {{!-- UTC --}}
	<div class="row mb-5">
    <div class="col-12">
      <h4>UTC Dates</h4>
      {{pikaday-input
      	value=value4
        class="form-control"
        format="MM/DD/YYYY"
        useUTC=true
        onSelection=(action (mut value4))
      }}
      <div class="mt-2">{{value4}}</div>
    </div>
  </div>
  
  {{!-- Inputless pikaday --}}
  <div class="row mb-5">
    <div class="col-12">
      <h4>Input-less Pikaday</h4>
      {{pikaday-inputless
      	value=value1
        onSelection=(action (mut value1))
      }}
      <div class="mt-2">{{value1}}</div>
    </div>
  </div>
  
</div>

styles.app.css

body {
	padding: 20px;
}

.ember-pikaday-container {
  max-width: 260px;
}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-pikaday": "2.2.2"
  }
}