Google Analytics Polymer Web 组件 - Safari 日期选择器答案

【问题标题】：Google Analytics Polymer Web Components - Safari DatepickerGoogle Analytics Polymer Web 组件 - Safari 日期选择器
【发布时间】：2016-07-20 11:41:26
【问题描述】：

我正在使用Google's Polymer Analytics Web Components 构建仪表板。然而，这些元素似乎依赖于 HTML 5（在大多数情况下非常好），但对于 Safari (Mac)，它们不是原生的 HTML 5 日期选择器。

如何将 JqueryUI Datpicker（或等价物）绑定到这些组件？

例如：

 <google-analytics-date-selector></google-analytics-date-selector>

创建以下影子代码块：

<google-analytics-date-selector class="x-scope google-analytics-date-selector-0">
  <span class="control style-scope google-analytics-date-selector">
    <label for="startDate" class="style-scope google-analytics-date-selector">Start Date</label>
    <input id="startDate" type="date" class="style-scope google-analytics-date-selector hasDatepicker" max="2016-03-30" min="2005-01-01">
  </span>
  <span class="control style-scope google-analytics-date-selector">
    <label for="endDate" class="style-scope google-analytics-date-selector">End Date</label>
    <input id="endDate" type="date" class="style-scope google-analytics-date-selector" min="2016-03-24" max="2016-03-31">
  </span>
</google-analytics-date-selector>

如何使用 JQUI Datepicker 定位 #startDate 和 #endDate 输入元素

【问题讨论】：

标签： jquery jquery-ui google-analytics datepicker polymer

【解决方案1】：

您可以使用<paper-date-picker>，它适用于多种浏览器，包括 Safari，或者从exploring Custom Elements 中选择其他日期选择器之一。

<paper-date-picker> 文档显示了一个示例 sn-p：

<paper-dialog class="paper-date-picker-dialog" modal>
  <paper-date-picker date="[[date]]"></paper-date-picker>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm>OK</paper-button>
  </div>
</paper-dialog>

创建一个包含日期选择器的模式对话框，如 Safari 屏幕截图所示：

【讨论】：