it-swarm.com.de

Wie lässt sich jqueryUI datepicker in einem anderen Format senden, als angezeigt wird?

Ich arbeite an Internationalisierung mit jQueryUI. Ich habe ein DatePicker-Steuerelement in einem Formular, das ordnungsgemäß in französischer Sprache funktioniert.

Wenn ich ein Datum wähle, z. B. den 15. August 2012, zeigt der DatePicker wie erwartet 15 Aoû, 2012 an. Mein Problem ist jedoch, dass bei der Veröffentlichung des Formulars der Wert des DatePicker als "15 Aoû, 2012" angegeben wird, der jetzt auf dem Server übersetzt werden muss, bevor er ordnungsgemäß gespeichert werden kann.

Meine Frage ist, gibt es einen eingebauten Weg in jQueryUI DatePicker, damit ich es immer in einem konsistenten Format auf den Server posten kann, unabhängig davon, in welcher Sprache das Steuerelement angezeigt wird? Wenn es keinen integrierten Weg gibt, welche Optionen gibt es, um dies zu erreichen?

Mir ist klar, dass ich das Datumsformat auf etwas wie den 15.08.2012 ändern kann, anstatt die Textdarstellung zu verwenden. Dies ist jedoch nicht das, was ich tun möchte.

44
Wally Lawless

Dafür gibt es zwei Konfigurationsoptionen: altField und altFormat. http://api.jqueryui.com/datepicker/#option-altField Wenn Sie ein altField angeben, wird dieses Feld ebenfalls aktualisiert und es wird das altFormat ..__ Wenn das Feld altField ein ausgeblendetes Feld ist, können Sie das reguläre Feld ignorieren und das Feld altField an db senden.

45
iwiznia

Wie Sie bereits bemerkt haben, funktioniert die Angabe eines Datumsformats für neu eingegebene Datumsangaben gut, ändert jedoch nicht das value-Attribut, das bereits im Datumseingabefeld bereitgestellt wurde. Ich habe einige Zeit gebraucht und bin mir nicht sicher, ob diese Lösung ideal ist, aber hier wird meine Situation erklärt und der Code, der sie löst. Könnte anderen in Zukunft mit demselben Problem helfen. In meinem Beispiel verwende ich dd/MM/yyyy als Anzeigeformat.

  1. Die Seite enthält eine beliebige Anzahl von Datumseingabefeldern, für die ein value-Attribut im Format yyyy-MM-dd angegeben sein kann oder nicht, das als von W3C angegeben ist.
  2. Einige Browser verfügen über eine eigene Eingabesteuerung, um Datumsangaben zu verarbeiten. Zum Zeitpunkt des Schreibens sind das beispielsweise Opera und Chrome. Diese sollten erwarten und ein Datum in dem oben genannten Format speichern, während sie entsprechend den regionalen Einstellungen des Kunden gerendert werden. In diesen Browsern möchten/müssen Sie wahrscheinlich kein jqueryui datepicker erstellen.
  3. Browser, die nicht über ein integriertes Steuerelement zum Verarbeiten von Datumseingabefeldern verfügen, benötigen den jqueryui datepicker zusammen mit einem unsichtbaren "alt" -Feld.
  4. Das unsichtbare Eingabefeld alt mit dem Format yyyy-MM-dd muss den ursprünglichen Namen und eine eindeutige ID haben, damit die Formularlogik weiterarbeiten kann.
  5. Schließlich muss der yyyy-MM-dd-Wert des Anzeigeeingabefelds analysiert und durch das gewünschte Gegenstück ersetzt werden.

Hier ist der Code: Verwenden Sie Modernizr , um zu ermitteln, ob der Client Datumseingabefelder nativ rendern kann.

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').each(function (index, element) {
        /* Create a hidden clone, which will contain the actual value */
        var clone = $(this).clone();
        clone.insertAfter(this);
        clone.hide();

        /* Rename the original field, used to contain the display value */
        $(this).attr('id', $(this).attr('id') + '-display');
        $(this).attr('name', $(this).attr('name') + '-display');

        /* Create the datepicker with the desired display format and alt field */
        $(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });

        /* Finally, parse the value and change it to the display format */
        if ($(this).attr('value')) {
            var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
            $(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
        }
    });
}
10
Vincent Sels

Wie @ Pawel-Dyda erwähnt hat 

getDate () Methode

var currentDate = $( ".selector" ).datepicker( "getDate" );

Hier ist ein Beispiel, was es zurückgibt: Wed Jan 20 2016 00:00:00 GMT+0300.

Sie können es in Javascript, PHP, in SQL oder was auch immer parsen.


MySQL-Analysebeispiel:

select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');

Kehrt zurück:

2016-01-20 00:00:00
0
NikitOn

Lösung für ASP.NET

@using (Html.BeginForm("ActionName", "ControllerName"))
{
    @Html.HiddenFor(m => m.DateFrom)
    @Html.HiddenFor(m => m.DateTo)

    <div class="form-group">
        @Html.LabelFor(m => m.DateFrom)
        <input id="datepicker-date-from" type="text" class="form-control datepicker" value="@Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.DateTo)
        <input id="datepicker-date-to" type="text" class="form-control datepicker" value="@Model.DateTo.Date.ToString("dd.MM.yyyy")" />
    </div>

    <input type="submit" class="btn btn-sn btn-primary" value="Download" />
}


@section scripts {
    <script type="text/javascript">

        $(function () {
            $("#datepicker-date-from").datepicker(
            {
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateFrom),
                altFormat: "yy-mm-dd"
            });

            $("#datepicker-date-to").datepicker(
            {
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateTo),
                altFormat: "yy-mm-dd"
            });
        });

    </script>
}
0
Muflix

Grundsätzlich sollten Sie nicht das Datum neu formatieren. Stattdessen sollten Sie das Date-Objekt von JavaScript über die Methode " getDate () " aus Datepicker lesen. Dann müssen Sie es an den Server übergeben.
Die Frage ist wie. Grundsätzlich wollen Sie ein gängiges Format. Wenn Sie JSON verwenden, ist die Antwort sehr einfach. Setzen Sie einfach ein Date-Objekt, und die stringify () - Funktion von JSON formatiert es automatisch in ISO8601 .

Wie Sie in Wikipedia sehen können, wurde ISO8601 so konzipiert, dass Datum und Uhrzeit zuverlässig ausgetauscht werden. Daher sollten Sie dies verwenden.
Es kann hilfreich sein zu wissen, dass moderne Webbrowser die toISOString()-Methode des Date-Objekts unterstützen.

0
Paweł Dyda

Es scheint, dass jemand anderes diese oder eine ähnliche Frage vor Ihrer hatte. 

Wenn Sie diese Stackoverflow-Antwort lesen, versuchte der Autor, das Datum in einem Format anzuzeigen und die Daten in einem anderen Format an MySQL zu übergeben. 

Die vorherige Antwort in diesem Link ermöglicht es Ihnen, auf den ausgewählten Wert als Variable zuzugreifen. Jetzt müssen Sie nur noch ein parseDate mit der ausgewählten Datumsvariablen verbinden.

<script type="text/javascript">
    $('#cal').datepicker({
             dateFormat: 'dd M yy',
             onSelect: function(dateText, inst) { 
             var dateAsString = dateText; //the first parameter of this function
             var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
           }
    });
</script>

Überprüfen Sie den Link parseDate auf Einstellungen und Formatierungen.

Hoffe das hilft!

0
Bechard