RSS

  • YouTube
  • LinkedIn
  • Google

Archiv nach dem Monat : Regex

Verwendung von jQueryMask Plugin in Format Datumsangaben in verschiedenen Mustern

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.

jQuery('[Daten-Rolle ="Datum"]).Maske("TC99/M9/D9", {
        Platzhalter: "____/__/__",
        Übersetzung: {
            "D": {Muster: /[0-3]/, optional: falsch, rekursive: wahr},
            "M": {Muster: /[01]/, optional: falsch, rekursive: wahr},
            "T": {Muster: /[12]/, optional: falsch, rekursive: wahr},
            "(C)": {Muster: /[09]/, optional: falsch, rekursive: wahr}
        }
    });

Der obige Code kann Maske und Termine im Pre zu validieren JAHR/MONAT/TAG Format.

Mit einem Eingang wie

<;input Type ="Text" Daten-Rolle ="Datum" Wert ="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

        Var MaskBehaviorDateTime = Funktion (Val, und, Feld) { // Diese Funktion muss eine Maske Var Msk zurück = "TC99/M9/D9"; // Unser gewünschtes Format Var V = field.is('input') ? Field.Val() : Field.Text(); // ist eine Eingabe oder eine andere HTML-element??
                    V = v.replace(/\D/g, ''); // Streifen nicht stellen, wenn (v != '') { // hat Wert?
                        if ((/^[01]\d[0-3]\dd{4}$/).Test(v)) { //Testen, ob Muster Monat/Tag/Jahr nur V = v.replace(/^(\d{4})(\d{2})(\d{2})$/, "$3 / $2 / $1");
                        } elseif ((/^[01]\d[0-3]\dd{4}[012]\d[0-5]\d$ /).Test(v)) { //Testen Sie, ob Muster Monat/Tag/Jahr Stunde:Minute V = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, "$3 / $2 / $1");
                            // Wenn wir, Stunde und Minute zeigen müssen, zurückgegebene Maske muss auch geändert werden
                            // 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 und m muss existiert in Übersetzungsoptionen
                        }
                        Field.is('input') ? Field.Val(v) : Field.Text(v);
                    }
                    Msk zurück;
                },
                OptionsDateTime = {
                    Platzhalter: "____/__/__",
                    Übersetzung: {
                        "D": {Muster: /[0-3]/, optional: falsch, rekursive: wahr},
                        "M": {Muster: /[01]/, optional: falsch, rekursive: wahr},
                        "T": {Muster: /[12]/, optional: falsch, rekursive: wahr},
                        "(C)": {Muster: /[09]/, optional: falsch, rekursive: wahr},
                        "h": {Muster: /[0-2]/, optional: wahr, rekursive: wahr},
                        "m": {Muster: /[0-5]/, optional: wahr, rekursive: wahr}
                    }
                };
        jQuery('[Daten-Rolle ="Datum"]').Maske(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

    Var MaskBehaviorDateTime = Funktion (Val, und, Feld) {
            // Wenn bereits ein Wert vorhanden ist, die Formate in der standard tt/mm/jjjj mit der optionalen hh:mm:SS-Var-Msk = "TC99/M9/D9 h9:M9:S9";
            if (Attr-Feld.("Original Datumswert") == undefined) {
                Var o = field.is('input') ? Field.Val() : Field.Text();
            } anderes {
                Var Attr = Feld.("Original Datumswert");
            }
            V = die. ersetzen(/\D/g, '');
            if (v != '') {
                Attr-Feld.("Original Datumswert") == undefined &;&; Attr-Feld.("Original Datumswert", die);
                if ((/^[12][09]\d{2}[01]\d[0123]\d$ /).Test(v)) { // Jahr/Monat/Tag V = v.replace(/^(\d{4})(\d{2})(\d{2})$/, "$3 / $2 / $1");
                    MSK = "D9/M9/TC99";
                } elseif ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$ /).Test(v)) { // Jahr/Monat/Tag Stunde: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";
                } elseif ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$ /).Test(v)) { // Jahr/Monat/Tag Stunde:Minute:zweite 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);
            }

            Msk zurück;
        },
        OptionsDateTime = {
            Platzhalter: "__/__/____",
            Übersetzung: {
                "D": {Muster: /[0-3]/, optional: falsch, rekursive: wahr},
                "M": {Muster: /[01]/, optional: falsch, rekursive: wahr},
                "T": {Muster: /[12]/, optional: falsch, rekursive: wahr},
                "(C)": {Muster: /[09]/, optional: falsch, rekursive: wahr},
                "h": {Muster: /[0-2]/, optional: wahr, rekursive: wahr},
                "m": {Muster: /[0-5]/, optional: wahr, rekursive: wahr},
                "s": {Muster: /[0-5]/, optional: wahr, rekursive: wahr}
            },
        };
    jQuery('[Daten-Rolle ="Datum"]').Maske(maskBehaviorDateTime,  optionsDateTime);

Mit einem Eingang wie

<;input Type ="Text" Daten-Rolle ="Datum" Wert ="2018-06-11 15:40">;

Die Ausgabe wird

11/06/2018 15:40

Hope this helfen Sie!