Question

有没有人对Polymer的日期输入元素有任何建议。比一些组合框更加用户友好的

Polymer-Date-Picker项目似乎在同一页面上有多个输入字段存在问题（which I have reported）

Answer 1

可能的起点是在Polymer元素中包装现有的日期输入字段库。

这是一个Live Demo包裹Pikaday，一个轻量级且可配置的JavaScript日期选择器，位于自定义的Polymer元素中。

请注意示例源代码中的注释。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <!-- HTML import of the custom `pikaday-element` -->
    <link rel="import" href="pikaday-element.html">
  </head>
  <body>
    <pikaday-element></pikaday-element>
  </body>
</html>

<!-- pikaday-element.html -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="pikaday-element">
  <template>
    <link rel="stylesheet" href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css">
    <input type="text" id="datepicker">
    <div id="container"></div>
  </template>
  <script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
  <script>
    Polymer({
      ready: function() {
        var picker = new Pikaday({
          // targets the #datepicker id within the shadow DOM.
          field: this.$.datepicker,
          // targets the #container id within the shadow DOM.
          container: this.$.container,
          // automatically show the datepicker on-load.
          // note: when set to true, it flashes for a brief moment and then hides
          bound: false
        });
      }
    });
  </script>
</polymer-element>

由于这只是一个起点，您可以根据需要配置日期选择器和设置。

非常感谢Ampersand JS Toolkit向我介绍了Pikaday和RawGit来托管Pikaday资产。

干杯！

聚合物的日期输入字段？

1 个答案: