application.html

<dom-module id='x-datepicker'>
  <template>
    <style>
      :host {
        min-height: 67px;
      }

      .mdl-layout {
        align-items: center;
        justify-content: center;
      }

      .mdl-layout__content {
        padding: 24px;
        flex: none;
      }

      .date-picker--mdl-button {
        transform: translate(-100%, 0%);
      }

      .is-disabled {
        pointer-events: none;
      }

      .textarea {
        width: 100%;
        height: 67px;
        min-height: 67px;
      }
    </style>
    <div class="textarea">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--align-right mdl-textfield--floating-label" id$="{{id}}-textfield" disabled$="[[disabled]]">
        <span class="mdl-textfield__label" disabled$="[[disabled]]"><i18n datepicker$="{{locale}}.{{id}}">{{title}}</i18n></span>
        <input class="mdl-textfield__input" type="text" id$="{{id}}-textfield__input" disabled$="[[disabled]]">
        <label class="date-picker--mdl-button mdl-button mdl-js-button mdl-button--icon" for$="{{id}}-textfield__input" disabled$="[[disabled]]">
          <i class="material-icons mdl-list__item--icon" id$="{{id}}-icon" on-click="updatePicker" disabled$="[[disabled]]">date_range</i>
        </label>
      </div>
    </div>
  </template>
  <script>
    // element registration
    Polymer({
      is: 'x-datepicker',
      properties: {
        id: {
          type: String,
          reflectToAttribute: true
        }
      },
      ready: function() {

        var _callback = function(language) {
        }.bind(this);

        app.i18n.attach(_callback);
        this.localize(null, app.baseUrl, ['datepicker.i18n'], 'i18n', 'datepicker', this.id);
      },
      behaviors: [app.LocalizationBehavior],
    });
  </script>
</dom-module>