ember-cli-materialize/addon/components/md-input-date.js

An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.

import $ from 'jquery';
import MaterializeInput from './md-input';
import layout from '../templates/components/md-input-date';

const MONTH_NAMES = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

function formatDate(timestamp) {
  const d = new Date(timestamp);
  return `${d.getDate()} ${MONTH_NAMES[d.getMonth()]}, ${d.getFullYear()}`;
}

export default MaterializeInput.extend({
  layout,

  selectMonths: true,
  numberOfYears: 15,
  min: '',
  max: '',

  didInsertElement() {
    this._super(...arguments);
    this._setupPicker();
  },

  willDestroyElement() {
    this._super(...arguments);
    this._teardownPicker();
  },

  _setupPicker() {
    const datePickerOptions = this.getProperties('selectMonths', 'numberOfYears', 'min', 'max');
    datePickerOptions.selectYears = datePickerOptions.numberOfYears;

    this._onDateSet = evt => {
      if (evt.select) {
        this.set('value', formatDate(evt.select));
      }
    };

    this.$('.datepicker').pickadate(
      $.extend(datePickerOptions, {
        onSet: this._onDateSet
      })
    );
  },

  _teardownPicker() {
    const $pickadate = this.$('.datepicker').data('pickadate');
    if ($pickadate) {
      $pickadate.stop();
    }
  }
});