Comment faire jQueryUI datepicker soumettre dans un format différent de ce qui est affiché?

comme vous l'avez remarqué, fournir une dateFormat fonctionne bien pour dates nouvellement entrées , mais il ne modifie pas l'attribut value qui a déjà été fourni à la date champ d'entrée. Cela m'a pris du temps et je ne suis pas sûr que cette solution soit idéale, mais voici ma situation expliquée et le code qui la résout. Pourrait aider d'autres avec le même problème à l'avenir. Dans mon exemple, j'utilise dd/MM/yyyy comme format d'affichage.

1. la page contient n'importe quel nombre de champs d'entrée de date, qui peut ou ne peut pas déjà avoir un attribut value fourni dans le format yyyy-MM-dd , comme spécifié par W3C .
2. certains navigateurs ont leur propre contrôle d'entrée pour gérer les dates. Au moment de l'écriture, C'est par exemple Opera et Chrome. Ceux-ci devraient s'attendre et stocker une date dans le format susmentionné, tout en les rendant selon les paramètres régionaux. Vous n'avez probablement pas besoin de créer un lecteur de données jqueryui dans ces navigateurs.
3. les navigateurs qui n'ont pas de contrôle intégré pour gérer les champs d'entrée de date auront besoin du lecteur de données jqueryui avec un champ invisible "alt".
4. le champ d'entrée invisible, alt avec le format yyyy-MM-dd doit avoir le nom original et un id unique pour que la logique des formulaires puisse continuer à fonctionner.
5. enfin, la valeur yyyy-MM-dd du champ display input doit être analysée et remplacée par sa contrepartie désirée.

donc, voici le code, en utilisant Modernizr pour détecter si oui ou non le client est capable de rendre nativement les champs d'entrée de date.

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));
        }
    });
}

il semble que quelqu'un d'autre avait cette question ou une question semblable avant la vôtre.

Si vous lisez ce stackoverflow réponse , l'auteur a essayé d'afficher la date dans un format et de transmettre les données vers MySQL dans un autre format.

la réponse préalable dans ce lien vous permet de configurer l'accès à la valeur sélectionnée comme variable. Maintenant, tout ce dont vous avez besoin est de connecter une variable parseDate à votre date sélectionnée.

<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>

cochez le lien parseDate pour les paramètres et le formatage.

Espérons que cette aide!

fondamentalement, vous devriez pas reformater la date. À la place, vous devriez lire L'objet Date de JavaScript à partir de Datepicker, via la méthode getDate() . Ensuite, vous devez le transmettre au serveur.

La question est de savoir comment. Fondamentalement, ce que vous voulez est un format commun. Si vous utilisez JSON la réponse est très simple, il suffit de mettre l'objet date et la fonction stringify() de JSON le formatera automatiquement pour ISO8601 .

comme vous pouvez le voir sur Wikipedia, ISO8601 a été conçu pour échanger la date et l'Heure de manière fiable, donc c'est ce que vous devez utiliser.

Il pourrait être utile de savoir que les navigateurs Web modernes prennent en charge la méthode toISOString() de Date object.

comme @Pawel-Dyda l'a mentionné, Il y a un

getDate () method

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

voici un exemple de ce qu'il retourne: Wed Jan 20 2016 00:00:00 GMT+0300.

vous pouvez l'analyser en Javascript, PHP, en SQL ou autre.

MySQL parsing examlple:

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

Retourne:

2016-01-20 00:00:00

solution au travail pour 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>
}

<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
    $( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
    $( "#datepicker" ).datepicker();
</script>