date-input.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">

<link rel="import" href="date-validator.html">

<dom-module id="date-input">

  <style>
    span {
      @apply(--paper-input-container-font);
      opacity: 0.33;
      text-align: center;
    }

    input {
      position: relative; /* to make a stacking context */
      outline: none;
      box-shadow: none;
      padding: 0;
      width: 100%;
      background: transparent;
      border: none;
      color: var(--paper-input-container-input-color, --primary-text-color);
      text-align: center;

      @apply(--layout-flex);
      @apply(--paper-font-subhead);
      @apply(--paper-input-container-input);
    }

    .container {
      @apply(--layout-horizontal);
    }

  </style>

  <template>
    <date-validator id="validator"></date-validator>

    <span aria-hidden id="monthLabel" hidden>Month</span>
    <span aria-hidden id="yearLabel" hidden>Year</span>

    <iron-a11y-keys id="a11y-month" target="[[expirationMonth]]" keys="/"
        on-keys-pressed="_selectYear"></iron-a11y-keys>
    <div class="container">
      <input is="iron-input"
          id="expirationMonth"
          aria-labelledby$="[[_computeAriaLabel(ariaLabelPrefix,'monthLabel')]]"
          required$="[[required]]"
          maxlength="2"
          bind-value="{{month}}"
          placeholder="MM"
          allowed-pattern="[0-9]"
          prevent-invalid-input
          autocomplete="cc-exp-month"
          type="tel"
          disabled$="[[disabled]]"
          invalid="{{invalid}}"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]">
      <span>/</span>
      <input is="iron-input"
          id="expirationYear"
          aria-labelledby$="[[_computeAriaLabel(ariaLabelPrefix,'yearLabel')]]"
          required$="[[required]]"
          maxlength="2"
          bind-value="{{year}}"
          placeholder="YY"
          allowed-pattern="[0-9]"
          prevent-invalid-input
          autocomplete="cc-exp-year"
          type="tel"
          disabled$="[[disabled]]"
          invalid="{{invalid}}"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]">
    </div>
  </template>

</dom-module>

<script>
  Polymer({

    is: 'date-input',

    behaviors: [
      Polymer.IronValidatableBehavior
    ],

    properties: {
      /**
       * Set to true to mark the input as required.
       */
      required: {
        type: Boolean,
        value: false
      },

      /**
       * The month component of the date displayed.
       */
      month: {
        type: String
      },

      expirationMonth: {
        type: Object,
        value: function() {
          return this.$.expirationMonth;
        }
      },

      /**
       * The year component of the date displayed.
       */
      year: {
        type: String
      },

      /**
       * The date object used by the validator. Has two properties, month and year.
       */
      date: {
        notify: true,
        type: Object
      },

      validator: {
        type: String,
        value: 'date-validator'
      },

      ariaLabelPrefix: {
        type:String
      }

    },

    observers: [
      '_computeDate(month,year)'
    ],

    _computeDate: function(month, year) {
      // Months are 0-11.
      this.date = {month: month, year: year};
      this.fire('dateChanged', this.date);
      // Advance cursor to year after month entry
      if (month.length === 2) {
        this.$.expirationYear.focus();
      }
    },

    _selectYear: function() {
      this.$.expirationYear.select();
    },

    validate: function() {
      // Empty, non-required input is valid.
      if (!this.required && this.month == '' && this.year == '') {
        return true;
      }
      this.invalid = !this.$.validator.validate(this.date);
      this.fire('iron-input-validate');
      return !this.invalid;
    },

    _computeAriaLabel: function(dateLabel, monthLabel) {
      return dateLabel + ' ' + monthLabel;
    }

  });
</script>