Konvertieren Sie mit jQuery ein Eingabefeld vom Typ Text in ein Eingabefeld vom Typ Datum

Lesezeit: 3 Minuten

Benutzer-Avatar
Iurie

Gibt es eine Möglichkeit, eine umzuwandeln text Eingabefeld eingeben zu a date Geben Sie eine mit jQuery ein, damit dem Benutzer eine Datumsauswahl angezeigt wird? Ich kann benutzerdefinierte Felder zu einem Formular hinzufügen, das von einem WordPress-Plugin erstellt wurde, aber es wird nicht unterstützt date Noch datetime-local Feldtypen, und ich brauche einen solchen.

<input name="adverts_eventDate" id="adverts_eventDate" type="text">

  • In welchem ​​Format lassen Sie den Benutzer das Datum eingeben? (z. B. mm/tt/jjjj)

    – Neil

    13. März 2017 um 17:25 Uhr

  • @nfnneil Ich habe noch kein Format, da sich meine Seite in der Entwicklungsphase befindet :).

    – Iurie

    13. März 2017 um 17:49 Uhr


  • Wollen Sie also eine Eingabe mit dem Typ Datum nach der jQuery oder möchten Sie die Eingabe mit dem Typ Text in ein Datumsobjekt umwandeln?

    – Neil

    13. März 2017 um 17:50 Uhr

  • @nfnneil Ich möchte a konvertieren <input type="text"> Feld zu a <input type="date"> Feld, bevor das Formular den Benutzern angezeigt wird.

    – Iurie

    13. März 2017 um 17:56 Uhr


  • meine Antwort aktualisiert

    – Neil

    13. März 2017 um 17:59 Uhr

Benutzer-Avatar
Neil

Sie können den Typ einfach in jQuery ändern:

$("#adverts_eventDate").attr("type","date");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">

Du kann sich nicht ändern Datumsformat im HTML5-Datum:

Gibt es eine Möglichkeit, das Format des Eingabetyps = “Datum” zu ändern?

Da Sie Ihr Datumsformat in HTML5 nicht ändern können, Ich würde jQuery-UI empfehlen.

Hier ist ein Beispiel:

$( function() {
    $( "#adverts_eventDate" ).datepicker();
  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input name="adverts_eventDate" id="adverts_eventDate" type="text"></p>

  • Versuchen Sie anstelle von 3/4/16, ein Format zu verwenden, das sofort klar macht, was ist Datum und was … ist MonatJahr… ja?!

    – Roko C. Buljan

    13. März 2017 um 17:31 Uhr


  • Wie der 4. März 2016?

    – Neil

    13. März 2017 um 17:33 Uhr

  • Wenn Sie dh verwenden: 28oder zumindest 13 für das Datum wird niemand jemals einen Fehler machen. Wenn Sie 4 verwenden … wer weiß, was diese 4 ist. Es gibt gaaanz viele Datumsformate auf der ganzen Welt… weißt du?!

    – Roko C. Buljan

    13. März 2017 um 17:36 Uhr


  • Ja. Guter Punkt. Ich werde sehen, was das OP will, bevor ich es aktualisiere. (Ich habe die falsche Aussage entfernt).

    – Neil

    13. März 2017 um 17:39 Uhr


  • Und Date ist ziemlich dumm, sie alle zu entziffern. (Deshalb haben wir Moment.js, wo Sie buchstäblich das gewünschte Format usw. definieren können.)

    – Roko C. Buljan

    13. März 2017 um 17:42 Uhr

Konvertieren Sie ein Eingabefeld vom Typ Text in einen Datumstyp

Sie können jquerys verwenden attr um das type-Attribut von text auf date zu ändern.

$("#convert").click(function() {
  $("#adverts_eventDate").attr("type", "date")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">
<button id='convert'>to date</button>

Benutzer-Avatar
Birhan Nega

Sie können jquery-ui wie folgt verwenden

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">       </script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">

und dann

<script>
  $( function() {
    $( "#adverts_eventDate" ).datepicker();
  } );
  </script>

1146010cookie-checkKonvertieren Sie mit jQuery ein Eingabefeld vom Typ Text in ein Eingabefeld vom Typ Datum

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy