Ember Datepicker example

components_date-picker_component.js

import Ember from 'ember';
import moment from 'moment';
const { computed } = Ember;

export default Ember.Component.extend({

  classNames: 'date-picker',

  inputDate: null,

  computedDate: computed('inputDate', {
    get() {
      if (this.get('inputDate')) {
        var formattedDate = moment.utc(this.get('inputDate')).format('YYYY-MM-DD');
        return formattedDate;
      } else {
        return;
      }
    },
    set(key, value) {
      var formattedDate = moment.utc(value);
      if (formattedDate.isValid()) {
        this.set('inputDate', formattedDate.toDate());
      } else {
        this.set('inputDate', null);
      }
      return value;
    }
  }),
});

components_date-picker_template.hbs

{{input type="date" value=computedDate}}

{{yield}}

helpers_format-date.js

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

export function formatDate(params/*, hash*/) {
  var inputDate = params[0];
  
  var formattedDate = moment.utc(inputDate).format('YYYY-MM-DD');
  return formattedDate;
}

export default Ember.Helper.helper(formatDate);

templates_some-form.hbs

Pick a date: {{date-picker inputDate=model.date}}