聚合物的日期输入字段？

Question

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

Polymer-Date-Picker项目似乎在同一页面上有多个输入字段的问题(我已经报告过)

Answer 1

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

这是一个Live Demo包装Pikaday,一个轻量级和可配置的JavaScript datepicker,在一个自定义的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资产.

干杯!