Wie kann man mit jquery datepicker umgehen, wenn Personen Daten in verschiedenen Formaten eingeben?

Question

Ich habe den folgenden Code:

$('#MilestoneStartDate').datepicker({ 
    dateFormat: 'dd M yy' 
}); 

und es funktioniert gut, wenn Sie mit der Maus auf einem Datum im Popup zu klicken, um ein Datum einzugeben, aber wenn eine Person Typen in einem Tag oder Pasten in einem Datum in das Textfeld mit einem anderen Format als oben (wie „2016.01.01“), wenn ich diesen Code habe:

var startDate = $('#MilestoneStartDate').datepicker("getDate"); 

startdate Variable zeigt als aktuelles Datum (obwohl offensichtlich 2016.01.01 ist nicht das aktuelle Datum)

was ist der beste Weg zu mit diesen Situationen umgehen? Soll ich verhindern, dass Menschen Daten eingeben und einfügen oder gibt es eine Möglichkeit, eine Formatkonvertierung durchzuführen?

Answer 1

Die getDate Methode von Datepicker gibt einen Datumstyp zurück, keine Zeichenfolge.

Sie müssen den zurückgegebenen Wert in eine Zeichenfolge formatieren, die Ihr Datumsformat verwendet. Verwenden Sie picker die format Funktion:

var startDate = $('#MilestoneStartDate').datepicker('getDate'); 
$.datepicker.formatDate('dd M yy', startDate); 

Die vollständige Liste der Formatbezeich available here ist.

EDIT

$('#MilestoneStartDate').datepicker("getDate"); 

immer geben Sie das richtige Datum, wenn das Datum mit der Maus auf ein Datum Popup klicken ausgewählt, aber wenn jemand manuell schreiben oder Paste Datum in anderen Format, das gibt Ihnen das aktuelle Datum.

Um diese Situation zu behandeln, verwenden Sie den folgenden Code.

$(function(){  
    $('#MilestoneStartDate').datepicker({ 
     dateFormat: 'dd M yy' 
    });  
}); 

var strSelectedDate = new Date($('#MilestoneStartDate').val()); 
var formatedDate = $.datepicker.formatDate('dd M yy', strSelectedDate); 
alert(formatedDate); 

Working Demo

Per @Boris Serebrow Kommentar

Der Schlüssel ist new Date ($ ('# MilestoneStartDate') val().) - es versucht, tatsächlich zu "erraten" Das Format, also Dinge wie "2. März 2016", "2. März 2016" oder "2016, 2. März" werden korrekt geparst.

Schritt für Schritt:

Fall 1:

Hier strSelectedDate geben Sie das Datum im Standardformat können sagen, wenn ich 02 Mar 2016 von Datum Popup wählen Sie es

Mi Mar geben 02 2016 00:00:00 GMT + 0530

Jetzt

$.datepicker.formatDate('dd M yy', strSelectedDate); 

geben Sie das Datum Ihres Format wie unten

02 Mar 2016

Gehäuse: 2

Wie Sie in Ihrer Frage an, ob Benutzer manuell eingeben Datum wie 1/1/2016 strSelectedDate geben Sie das Standarddatum wie Balg

Fr 1. Januar 2016 00:00:00 GMT + 0530

Dann

$.datepicker.formatDate('dd M yy', strSelectedDate); 

geben Sie das Datum formated

01 Jan 2016

Welches Datum ist korrekt wie erwartet.

Fall 3:

Nun, wenn der Benutzer manuell ein ungültiges Datum schreiben wie 112016 dann strSelectedDate kehrt Invalid Date so hier können Sie einige Validierungs Client-Seite implementieren den Benutzer das richtige Datum einzugeben.

Hoffe das hilft dir.

Answer 2

Sie können das Textfeld von zu bearbeitenden Personen deaktivieren und daneben ein Symbol platzieren. Die Benutzer müssen auf das Symbol klicken und das Datum eingeben. Also kopiere Paste wird hier nicht funktionieren.

Answer 3

Kurze Antwort: Lassen Sie den Benutzer ihre Fehler beheben (Sie können einfügen, es ist kein Problem). Bleiben Sie einfach bei einem einfachen Validierungsmechanismus.

Lange Antwort:

Ich glaube, Sie sollten den Benutzern erlauben Text einzufügen, aber es macht keinen Sinn, die Form zu überprüfen, bis alle Kontrollen gültig sind.

Wenn also der Benutzer ein fehlerhaftes Datum in Ihr Datumssteuerelement einfügt, sollte Ihre ui beim Klicken auf die Schaltfläche zum Senden eine Fehlermeldung anzeigen, die besagt: "Das Datum hat nicht das richtige Format. Das richtige Format ist dd M yy ".

Beachten Sie, dass der Benutzer wirklich alles einfügen kann, auch eine Zeichenfolge wie "Izeoif Zoi"; Sie brauchen also unbedingt eine Validierung.

Wenn der Benutzer der Täter ist, sollte sie ihre Fehler beheben (glaube ich).

Es ist sehr üblich, dem Benutzer zu sagen, dass ein Steuerelement fehlerhaft ist: zum Beispiel nehme ich an, dass Sie diese Fehlermeldung kennen: "Der Name ist erforderlich". Das ist die gleiche Idee hier.

Wie @Eric Guan darauf hingewiesen hat, können Sie Tipps verwenden, um dem Benutzer zu helfen, die Idee Ihres Datumsformats überhaupt erst zu verstehen (bevor er etwas eingibt/einfügt).

Answer 4

Validierung ist eine gute Idee. Auch könnten Sie Ihr eigenes Plugin schreiben Datumsformate zu ändern oder aussehen: https://plugins.jquery.com/formatDateTime/

Answer 5

Die richtige Sache zu tun, um Eingang zu sagen wäre, wird dem Benutzer, welche Datumsformat erwartet und wäre gültig.

Dies gilt als gute UX und wird so häufig verwendet, dass die meisten Benutzer dies erwarten würden.

Außerdem können Sie möglicherweise nicht alle Arten von Daten analysieren eingegeben werden, zum Beispiel einige Länder verwenden MM/DD/YYYY während andere DD/MM/YYYY verwenden, und wer sagt, wenn 01/07/2015 ist das siebte von Januar oder dem ersten Juli, gibt es einfach keine Möglichkeit, zu erzählen, ohne das Format zu kennen.

Wie Sie jQuery UI verwenden, ist hier ein schneller Weg, um die Datumsauswahl mit dem eingebauten in Tooltip-Widget

$('#MilestoneStartDate').datepicker({ 
 
    dateFormat: 'dd M yy' 
 
}).on({ 
 
\t change : function() { 
 
     if (!this.checkValidity()) { 
 
     \t $(this).tooltip({ 
 
\t \t \t \t close: function(event, ui) { ui.tooltip.stop() } 
 
\t \t \t }); 
 
      setTimeout(function(x) { $(x).tooltip('open') }, 0, this); 
 
     } else { 
 
     \t $(this).tooltip('destroy'); 
 
     } 
 
    } 
 
}).datepicker('setDate', new Date());

.ui-datepicker{ z-index: 999999999!important;} 
 
.ui-tooltip-content {font-size: 14px;}

<link href="https://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 
<p>Type an invalid date</p> 
 
<input id="MilestoneStartDate" pattern="[0-9]{2}\s[a-zA-Z]{3}\s[0-9]{4}" title='valid format is : "10 Mar 2015"' >

Hinweis zu bestätigen, dass das Muster gegen Validierung direkt hinzugefügt wird die Eingabe, also der Tooltip-Inhalt.
Es gibt viele andere Möglichkeiten, dies zu tun, wenn Sie eine reguläre Formularübermittlung verwenden, wäre die HTML5-Validierung eine Option usw., aber am Ende des Tages muss der Benutzer ein gültiges Datum entsprechend dem angegebenen Muster eingeben. ist besser als der Versuch, mit allen möglichen Datumsformaten umzugehen.

Answer 6

Es ist besser zu verhindern, dass der Benutzer die Daten eingibt oder einfügt. Stellen Sie Ihr Datum Textfeld nur mit readonly='readonly'