JS Animated. Wie man das Datumsformat im Buchungsformular ändert

Das jeweilige Tutorial zeigt, wie man das Datumsformat im Buchungsformular in der JS-animierten Vorlage ändert.

Sie erfahren, wie man die folgenden Datumsformate nutzt:

• Amerikanisch: 12/31/2014
• Europäisch: 31/12/2014
• ISO: 2014/12/31

Fangen wir an!

Die Werte im Formular standardmäßig

Finden Sie die Datei .html mit dem Formular in dem Ordner "site" und öffnen Sie sie in Notepad++, oder einem anderen Editor.

Ändern Sie das Datumsformat, das in den Feldern des Formulars standardmäßig angezeigt wird.

<input type="text" name="Check-in"  placeHolder='10/05/2014' data-constraints="@NotEmpty @Required @Date">

Wenn Sie, zum Beispiel, das amerikanische Datumsformat nutzen möchten, sollen Sie den oben genannten Code ersetzen:

<input type="text" name="Check-in"  placeHolder='05/10/2014' data-constraints="@NotEmpty @Required @Date">

Eingabeformat

Öffnen Sie den Ordner "booking" und dann den Ordner "js" in ihm.

Ändern Sie den folgenden Code in der Datei booking.js, indem Sie die Option dateFormat zum Objekt .datepicker für das notwendige Datumsformat entsprechend der Tabelle hinzufügen:

					.find(object.datepickerClass)
						.wrap(wrapper)
						.find('input')
						.datepicker({
					    	showButtonPanel: true
					    }).end().end()

Für das europäische Datumsformat wird der Code wie folgt aussehen:

					.find(object.datepickerClass)
						.wrap(wrapper)
						.find('input')
						.datepicker({
					    	showButtonPanel: true,
						dateFormat: 'dd-mm-yy'
					    }).end().end()

Speichern Sie die Änderungen und schließen Sie die Datei.

Einstellungen für das Validierungsdatum

In der Datei regula.js finden Sie den Code, der so aussieht:

// Überprüfung vom Datumsformat (check date format)
regula.custom({
    name:'Datum (Date)',
    defaultMessage: "Das Textfeld kann nur das Datumsformat MM/DD/YY! (The text field can only contain data format MM/DD/YY!)" enthalten,
    validator:function(){
    return /^(?:(?:(?:0?[13578]|1[02])(\/|-|\.)31)\1|(?:(?:0?[13-9]|1[0-2])(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:0?2(\/|-|\.)29\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:(?:0?[1-9])|(?:1[0-2]))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(this.value)
    }
})

ändern Sie die akzeptablen Werte für Ihr Datumsformat entsprechend der Tabelle:.

Speichern Sie die Änderungen und schließen Sie die Datei.

Jetzt können Sie die Datei .html mit Ihrem Buchungsformular im Browser öffnen und überprüfen, wie das Formular funktioniert. Dazu geben Sie verschiedene Daten ein.

Einstellungen für das E-Mail

Damit das Formular korrkt funktionieren kann, sollen Sie es aktivieren, indem Sie die E-Mail-Adresse, an die E-Mails gesendet werden, angeben. Außerdem sollen Sie zusätzliche Optionen wie SMTP-Server, Port, Benutzername und Passwort (wenn sie für die Arbeit mit Ihrem E-Mail nötig sind) einstellen. Machen Sie sich, bitte, mit dem folgenden Tutorial, um diese Einstellungen zu ändern:

• JS Animated. Wie man das Kontaktformular (ab der Vorlage #50000+) aktiviert

Wenn das Datumformat richtig ist, laden Sie dann die aktualisierten Dateien auf den Server hoch, indem Sie FTP-Kunden, zum Beispiel FileZilla, oder ein anderes Werkzeug wie der Dateimanager im Hosting Control Panel nutzen.

Sie können auch das ausführliche Video-Tutorial nutzen: