Question

我想在其地址栏中的Google地图中使用相同的用户界面，可以输入地址。

我正在创建一个使用地图的网络聚合物应用。问题是我应该将哪个元素用于地址栏？它被认为是浮动吗？样品表示赞赏。

Answer 1

这个例子不完整，因为它需要一些其他地方的行为和我修改过的pikaday导入。但它应该提供一个好主意，如何使用纸张输入来做其他的东西

<!--
`<pas-date-input>` us an element to collect dates from users.  It is designed to provide
as comprehensive approach to entering dates into an input field as possible.

As soon as the user focuses the input a date picker dialog is displayed, although focus remains
with the user in the input field.  The user can type parts of dates into the input field, and the
date picker dialog adjusts itself its interpretation of that date - jumping to todays date when
date is invalid.

The date is ultimately expected to be in the format dd/mm/yyyy, but it is only set that way if
the user clicks on the date picker dialog, otherwise it is left in the imperfect form in the input field.  So if the user enters some digits without any "/" characters this is assumed to be just a year (valid in the range 1901 to 2049 inclusive) before 4 full characters are typed, the year is estimated by what is being input with 3 digit years having a final 0 automatically appended.

As single "/" characted may mean dd/mm or mm/yy.  If a valid dd/mm can be interpreted from this then that is preferred, with the current year being assumed.  If the number after the slash is too large to be a month then mm/yy is assumed.

@param vague is defined then loss of focus will leave the text in the input field as it was.  If not the final worked out date will replace it
-->

<dom-module id="pas-date-input">
  <template>
     <style include="pikaday-style">
     :host {
        display: block;
      }
      :host {
        @apply(--pas-date-input)
      };
       #anchor {
        position: relative;
       }
       #container {
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 9998;
        background-color: #fff;
       }
       #field {
        width: var(--pas-date-field-length);
       }
    </style>
    <pas-date-validator id=validator></pas-date-validator>
    <paper-input
      id="field"
      label="[[label]]"
      auto-validate
      prevent-invalid-input
      allowed-pattern="[0-9/]"
      validator="pas-date-validator"
      error-message="dd/mm/yyyy"
      value="{{value}}"
      disabled="{{disabled}}"></paper-input>
    <div id="anchor">
      <div id="container"></div>
    </div>
  </template>

  <script src="/scripts/pikaday.js"></script>

  <script>
  /* global Pikaday */
  Polymer({
    is: 'pas-date-input',
    properties: {
      value: {
        type: String,
        value: '',
        notify: true,
        observer: '_valueChanged'
      },
      vague: {
        type: Boolean,
        value: false
      },
      disabled: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      }
    },
    behaviors: [
      PAS.DateUtils,
      Polymer.IronValidatableBehavior,
      Polymer.IronFormElementBehavior
    ],
    listeners: {
      'field.focus': '_gotFocus',
      'field.blur': '_lostFocus'
    },
    ready: function() {
      this.scopeSubtree(this.$.container, true);
    },
    attached: function() {
      var self = this;
      this.pikaday = new Pikaday({
        container: this.$.container,
        minDate: new Date(1901,0,1),
        maxDate: new Date(2049,11,31),
        onSelect: function(date) {
          self.value = [
            ('0' + date.getDate()).slice(-2),
            ('0' + (date.getMonth() + 1)).slice(-2),
            ('000' + date.getFullYear()).slice(-4)].join('/');
        }
      });
      this.pikaday.hide(); //ensure it starts hidden
    },
    detatched: function() {
      this.pikaday.destroy();
    },
    _valueChanged: function(value) {
      /* jshint boss: true */
      var d;
      if (this.pikaday && this.pikaday.isVisible()) {
        if ((d = this.strToDate(value)) && d !== true) {
          this.pikaday.setDate(d,true);
        } else {
          this.pikaday.setDate(new Date(),true);
        }
      }
    },
    _gotFocus: function() {
      this.pikaday.show();
      this._valueChanged(this.value);
    },
    _lostFocus: function() {
      var date = this.pikaday.getDate();
      this.pikaday.hide();
      if ((!this.vague && this.value.length > 0) ||
        (this.value.indexOf('/') < 0 && this.value.length > 4) ||
        (this.value.indexOf('/') > 1 && this.value.length > 6) ||
        (this.value.indexOf('/') > 0 && this.value.length > 7)) {
        this.value = [
            ('0' + date.getDate()).slice(-2),
            ('0' + (date.getMonth() + 1)).slice(-2),
            ('000' + date.getFullYear()).slice(-4)].join('/');

      }
    },
    _getValidity: function() {
      return !!this.strToDate(this.value);
    }
  });

  </script>

</dom-module>

Google Map API的地址栏，使用哪个元素

1 个答案: