jQuery Plugin Maske ist eine große Javascript-Bibliothek, Formatfelder für Präsentation und/oder eine richtig Eingabe Erzwingen von Benutzern.
Hier, Ich zeige, wie Eingaben können oder eine andere HTML-Element anzuzeigende Daten wann die Quelle hat eines anderen Format als Zielelement.
Beispiel:
- Wir haben eine Datetime mit Jahr-Monat-Tag-Stunde:Minute:Sekunden und müssen nur die Jahr/Monat/Tag Teil.
- Wir haben da Datum in Jahr-Monat-Tag und Notwendigkeit zu formatieren Tag/Monat/Jahr.
jQueryMask ist sehr einfach zu bedienen. Sie brauchen nicht zu viel zu verbergen, was Sie brauchen. Schauen Sie sich Beispiele auf seiner website.
Benötigen Sie ein einfaches Datum-Feld formatieren (auch in einem nicht-Input-element), benutzen Sie einfach den Code unten.
|
1 2 3 4 5 6 7 8 9 |
jQuery('[data-role="date"]).mask("TC99/M9/D9", { placeholder: "____/__/__", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true} } }); |
Der obige Code kann Maske und Termine im Pre zu validieren JAHR/MONAT/TAG Format.
Mit einem Eingang wie
|
1 |
<input type="text" data-role="date" value="2018-06-11 15:47" /> |
würde zu seinem Wert geändert werden 2018/06/11.
Wenn Sie versuchen, ein anderes Datum eingeben (nach löschen, Natürlich) Sie können nicht mit einer Zahl anders beginnen. 1 oder 2. Dieser Grund ist, dass unsere Maske eine Übersetzung erfolgen wenn Zeichen zulassen. Wenn das Muster nicht übereinstimmt, der Char wird gelöscht.
The meaning of “;TC99/M9/D9”; Maske ist:
- Muss beginnen mit 1 oder 2 (Übersetzung T: /[12]/ –; Benutzerdefiniertes format)
- Nummer muss 0 oder 9 (Übersetzung C: /[09]/ –; Benutzerdefiniertes format)
- Müssen eine Nummer haben (Alle) (Übersetzung 9 –; MaskPlugin Kern-format)
- Müssen eine Nummer haben (Alle) (Übersetzung 9 –; MaskPlugin Kern-format)
- Ein Schrägstrich wird automatisch hinzugefügt ( / )
- Nummer muss 0 oder 1 (Übersetzung M: /[01]/ –; Benutzerdefiniertes format)
- Müssen eine Nummer haben (Alle) (Übersetzung 9: MaskPlugin Kern-format)
- Ein Schrägstrich wird automatisch hinzugefügt ( / )
- Nummer muss 0, 1, 2 oder 3 (Übersetzung D: /[0-3]/ –; Benutzerdefiniertes format)
- Müssen eine Nummer haben (Alle) (Übersetzung 9: MaskPlugin Kern-format)
Natürlich, Es gibt keine echte Validierung. You can type “;2999/19/39”; und das ist kein gültiges Datum, aber ist fast fertig.
Also, auf andere Weise formatieren, Ändern Sie einfach Maske Parameterreihenfolge.
Aber, Wenn die Quelle-Datum in ein anderes Muster ist, wie Monat/Tag/Jahr, die Maske funktionieren nicht. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.
Anderes Datum behandeln werden Formate mehr als einfache Maske benötigt. Brauchen wir eine Funktion.
Suchen Sie den folgenden code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var maskBehaviorDateTime = function (val, e, field) { // This function must return a MASK var msk = "TC99/M9/D9"; // Our desired format var v = field.is('input') ? field.val() : field.text(); // is a input or another html element?? v = v.replace(/\D/g, ''); // stripe non digits if (v != '') { // has value? if ((/^[01]\d[0-3]\d\d{4}$/).test(v)) { //test if pattern match Month/Day/Year only v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1'); } else if ((/^[01]\d[0-3]\d\d{4}[012]\d[0-5]\d$/).test(v)) { //test if pattern match Month/Day/Year Hour:Minute v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1'); // If we need to show hour and minute, returned mask must be changed too // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5'); // msk = 'TC99/M9/D9 h9:m9'; // h and m must be exists in Translation options } field.is('input') ? field.val(v) : field.text(v); } return msk; }, optionsDateTime = { placeholder: "____/__/__", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true}, "h": {pattern: /[0-2]/, optional: true, recursive: true}, "m": {pattern: /[0-5]/, optional: true, recursive: true} } }; jQuery('[data-role="date"]').mask(maskBehaviorDateTime, optionsDateTime); |
Jetzt haben wir zwei weitere Übersetzung Muster (h und m). h bedeutet, dass die n-Indexposition zahlen müssen 0, 1 oder 2 und m Zahlen zwischen 0 und 5. Halten Sie im Verstand, was Fall zählt.
Mit dem obigen code, Wir können formatieren und Datum auf verschiedene Weise anzeigen. Ändern Sie einfach .Test() und .Ersetzen() Muster, Ihre gewünschte Muster zu füllen.
Dies ist der Code, den ich verwende, um Datenbank Datetime Felder mit Jahr-Monat-Tag Stunden formatieren:MINUTE:Zweiter in HTML-Elementen mit Tag/Jahr/Monat-Stunde:MINUTE
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var maskBehaviorDateTime = function (val, e, field) { // Caso já exista um valor, o formata no padrão dd/mm/yyyy com o opcional hh:mm:ss var msk = "TC99/M9/D9 h9:m9:s9"; if (field.attr("data-original-value") == undefined) { var o = field.is('input') ? field.val() : field.text(); } else { var o = field.attr("data-original-value"); } v = o.replace(/\D/g, ''); if (v != '') { field.attr("data-original-value") == undefined && field.attr("data-original-value", o); if ((/^[12][09]\d{2}[01]\d[0123]\d$/).test(v)) { // year/month/day v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1'); msk = "D9/M9/TC99"; } else if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$/).test(v)) { // year/month/day hour:minute v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5'); msk = "D9/M9/TC99 h9:m9"; } else if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$/).test(v)) { // year/month/day hour:minute:second v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5:$6'); msk = "D9/M9/TC99 h9:m9:s9"; } field.is('input') ? field.val(v) : field.text(v); } return msk; }, optionsDateTime = { placeholder: "__/__/____", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true}, "h": {pattern: /[0-2]/, optional: true, recursive: true}, "m": {pattern: /[0-5]/, optional: true, recursive: true}, "s": {pattern: /[0-5]/, optional: true, recursive: true} }, }; jQuery('[data-role="date"]').mask(maskBehaviorDateTime, optionsDateTime); |
Mit einem Eingang wie
|
1 |
<input type="text" data-role="date" value="2018-06-11 15:40"> |
Output will be 11/06/2018 15:40
Hope this helfen Sie!