Material Datum

Dieses Beispiel integriert den folgenden bereits vorhandenen JavaScript-Material-Datumsauswähler https://github.com/FreddyFY/material-datepicke und zeigt, wie externes JavaScript und CSS verwendet werden, um Eingaben des Befragten zu erfassen und die Eingabe mit mehrsprachiger Unterstützung zu validieren sowie das Styling basierend auf dem aktuellen ngSurvey theme ausgewählt vom Survey-Manager.

class MaterialDateWidget extends NGSWidget {
    /* 
        Beispiel, das zeigt, wie eine externe JavaScript- 
        basierte Erweiterung als ngSurvey-Widget mit Label-Unterstützung integriert wird.
        
        Dieses Beispiel integriert den material date picker
        https://github.com/FreddyFY/material-datepicker

        Zeigt, wie externes JavaScript und CSS verwendet werden, um Eingaben des Befragten zu erfassen
        und die Eingabe mit mehrsprachiger Unterstützung zu validieren
    */

    /*  HTML-Vorlage, die generiert wird, bevor die Widget-Klasse erstellt wird
        Alle IDs werden durch die uniqueId ergänzt
        die während der Erstellung des Widgets angegeben wird */
    static get template() {
        return `<input class="ngs-question__answer-field ngs-question__answer-field-material-date" type="text" id="materialpicker001">`;
    }

    /* Stil, der diesem Widget zugewiesen wird. Beachten Sie, dass alle 
      Elementklassennamen mithilfe der eindeutigen ID des Widgets abgegrenzt werden */  
    static get style() {
        return `.ngs-question__answer-field-material-date {max-width:100px;}`
    }

    /* Ermöglicht, die Antwort als erforderlich oder nicht erforderlich festzulegen
       über die Antwort-Einstellungsseite, um
       die Widget-Antwort während der Umfrage als erforderlich zu markieren
    */
    static get required() {
        return true;
    }

    /* Eigenschaften, die im Formular-Designer für jede
     Antwort festgelegt werden können, die diesen Widget-Typ verwendet */
    static get propertiesDef() {
        return [{
                id: 'color',
                label: 'color',
                defaultValue: 'var(--ngs-accent-color)',
                type: 'text'
            },
            {
                id: 'orientation',
                label: 'Orientation',
                defaultValue: 'portrait',
                type: 'list',
                list: [{
                        name: 'portrait',
                        value: 'portrait'
                    },
                    {
                        name: 'landscape',
                        value: 'landscape'
                    }
                ]
            }
        ];
    }

    /* Externe JavaScript-Abhängigkeiten, die geladen werden
     bevor das Widget erstellt wird */
    static get jsDependencies() {
        return [{
                id: 'moments',
                url: 'https://momentjs.com/downloads/moment-with-locales.min.js'
            },
            {
                id: 'materialdate',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.min.js'
            }
        ];
    }

    /* Externe CSS-Abhängigkeiten, die geladen werden
       bevor das Widget erstellt wird */
    static get cssDependencies() {
        return [{
                id: 'googlefonts',
                url: 'https://fonts.googleapis.com/icon?family=Material+Icons'
            },
            {
                id: 'materialdatecss',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.css'
            }
        ];
    }

    init() {
        var widget = this;
        // Holen Sie das Input-Element aus der Vorlage
        // Es ist wichtig, jede ID 
        // der Vorlage mit der uniqueId des Widgets zu versehen
        this.inputField = this.getWidgetElementById('materialpicker001');

        this.getLanguage$(lang => {
            // Richten Sie den Dateiauswähler ein, es ist wichtig, jede ID immer zu suffixen 
            // der Vorlage mit der uniqueId des Widgets zu versehen
            this.materialPicker001 = new MaterialDatepicker('#materialpicker001' + this.uniqueId, {
                lang: lang.languageCode,
                color: this.properties.color,
                orientation: this.properties.orientation,
                onNewDate: function(date) {
                    // Wenn der Benutzer ein Datum ausgewählt hat, stellen Sie den Wert im Formular ein
                    widget.setAnswer(widget.inputField.value);
                }
            });

            if (this.materialPicker001) {

                // Ermitteln Sie den aktuellen Render-Modus, um zu wissen, wie wir
                // den Zustand hier einrichten sollten; setzen Sie ihn auf deaktiviert, wenn 
                // das Widget im Nur-Lese-Modus ist 
                this.isDisabled$(disabled => {
                    this.inputField.disabled = disabled;
                });

                // Setzen Sie den Anfangswert, wenn das Widget erstellt wird
                if (this.answerContext.initialValue) {
                    this.inputField.value = this.answerContext.initialValue;
                } else if (this.inputField.value) {
                    this.setAnswer(this.inputField.value);
                }

                // Wenn der Benutzer den Text ändert, stellen Sie sicher, dass der Wert gespeichert wird
                // im Formular   
                this.inputField.addEventListener('input', (event) => {
                    this.textChange(this.inputField.value, this);
                });
            }
        });
    }

    // Den Wert an das Formular übermitteln
    textChange(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // Wird vom Formular aufgerufen
    // um zu überprüfen, ob der Wert gültig ist
    // Wenn nicht gültig, muss '' zurückgegeben werden (keine Fehlermeldung angezeigt) oder die anzuzeigende Fehlermeldung
    // Wenn gültig, null zurückgeben 
    isValid() {
        var date = new Date(this.inputField.value);
        if ((this.inputField.value && !(date instanceof Date && !isNaN(date.valueOf())))) {
            return 'InvalidDateDataTypeMessage';
        } else {
            return null;
        }
    }
}