basic-month-and-year.html

<!--
Shows a culture's name for the current month and the year.

To the degree possible, all language/culture-specific aspects of this component
are localizable with the Globalize library (https://github.com/jquery/globalize).

@element basic-month-and-year
@demo http://basic-web-components.github.io/basic-web-components/src/basic-month-and-year/?dom=shadow
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../basic-shared/basic-shared.html">
<link rel="import" href="../basic-month-name/basic-month-name.html">

<dom-module id="basic-month-and-year">
  <template>

    <style>
    :host(.rtl) {
      direction: rtl;
    }
    </style>

    <basic-month-name id="monthName"></basic-month-name>
    <span id="year"></span>

  </template>
</dom-module>

<script>
Polymer({

  behaviors: [
    Basic.CalendarHelpers,
    Basic.Generic
  ],

  is: 'basic-month-and-year',

  properties: {
    /**
     * The Globalize culture/language assigned to this element.
     *
     * @attribute culture
     */
    culture: {
      value: null,
      observer: '_cultureChanged'
    },

    /**
     * The date controlling which month and year are shown in this element.
     *
     * @attribute date
     * @type Date
     * @default today
     */
    date: {
      type: Date,
      value: null,
      reflectToAttribute: true,
      observer: '_dateChanged'
    }

  },

  ready: function() {
    if (!this.date) {
      // By default show the current month and year.
      this.date = new Date();
    }
  },

  _cultureChanged: function() {
    if (!this.date) {
      return;
    }

    this.$.monthName.culture = this.culture;

    // Ensure the month-year order matches the direction of the text.
    var rtl = this.isRTL(culture);
    this.classList.toggle('rtl', rtl);
  },

  _dateChanged: function() {
    if (!this.date) {
      return;
    }

    var date = this.date;
    this.$.monthName.month = date.getMonth();
    this.$.year.textContent = date.getFullYear();
  }

});
</script>