Google Analytics Polymer Web-Komponenten - Safari Datepicker

Question

Ich verwende Google's Polymer Analytics Web Components, um ein Dashboard zu erstellen. Diese Elemente scheinen jedoch auf HTML 5 (in den meisten Fällen großartig) zu beruhen, aber mit Safari (Mac) gibt es keinen nativen HTML 5-Datumsauswahlpunkt.

Wie bindet man JqueryUI Datpicker (oder gleichwertig) an diese Komponenten?

zum Beispiel:

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

erstellt den folgenden Schattencodeblock:

<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> 

Wie kann ich die #startDate und #endDate Eingabeelemente mit JQUI Datepicker Ziel

Answer 1

Sie <paper-date-picker> nutzen könnten, das funktioniert in mehreren Browsern, einschließlich Safari - oder wählen Sie einen der anderen Datumsauswahl aus exploring Custom Elements.

Die <paper-date-picker> docs zeigen ein Beispiel Schnipsel:

<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> 

, die einen modalen Dialog erstellt, die Datumsauswahl enthält, wie sie in dieser Safari Screenshot zu sehen: