web-dev-qa-db-fra.com

Comment soumettre jqueryUI datepicker dans un format différent de celui affiché?

Je travaille sur une internationalisation utilisant jQueryUI. J'ai un contrôle DatePicker sur un formulaire qui fonctionne correctement en français.

Lorsque je sélectionne une date, par exemple le 15 août 2012, le DatePicker affichera le 15 août 2012 comme je l’attendais. Mon problème, cependant, est que lorsque le formulaire est posté, la valeur de DatePicker est notée «15 août 2012» et doit maintenant être traduite sur le serveur avant de pouvoir être enregistrée correctement.

Ma question est la suivante: existe-t-il un moyen intégré dans jQueryUI DatePicker afin que je puisse toujours l'envoyer au serveur dans un format cohérent, quelle que soit la langue d'affichage du contrôle? S'il n'y a pas de méthode intégrée, quelles sont les options pour y parvenir?

Je me rends compte que je peux changer le formatde date au 15/08/2012 au lieu d'utiliser la représentation textuelle, mais ce n'est pas ce que je veux faire.

jquery-uiinternationalizationjquery-ui-datepicker
44
Wally Lawless

Il y a 2 options de configuration pour cela: altField et altFormat. http://api.jqueryui.com/datepicker/#option-altField Si vous spécifiez un altField, ce champ sera également mis à jour et aura le altFormat . Normalement, vous voudrez faire Si vous utilisez un champ caché, vous pouvez ignorer le champ normal et envoyer à db le champ altField.

45
iwiznia

Comme vous avez pu le constater, la fourniture d'un dateFormat fonctionne bien pour les nouvelles dates entrées, mais ne modifie pas l'attribut value qui a déjà été fourni dans le champ d'entrée de date. Cela m'a pris du temps et je ne suis pas sûr que cette solution soit idéale, mais voici ma situation et le code qui la résout. Peut aider les autres avec le même problème dans le futur. Dans mon exemple, j'utilise dd/MM/yyyy comme format d'affichage.

  1. La page contient un nombre quelconque de champs de saisie de date, qui peuvent ou non déjà posséder un attribut value fourni au format yyyy-MM-dd, comme spécifié par W3C .
  2. Certains navigateurs auront leur propre contrôle de saisie pour gérer les dates. Au moment de la rédaction, il s'agit par exemple d'Opera et de Chrome. Ceux-ci doivent s’attendre à et stocker une date dans le format susmentionné, tout en les rendant conformément aux paramètres régionaux du client. Vous ne voulez probablement pas/n'avez pas besoin de créer un jqueryui datepicker dans ces navigateurs.
  3. Les navigateurs qui ne possèdent pas de contrôle intégré pour gérer les champs de date ont besoin du sélecteur de date jqueryui avec un champ 'alt', invisible.
  4. Le champ de saisie alt invisible, au format yyyy-MM-dd, doit avoir le nom d'origine et un identifiant unique pour que la logique des formulaires continue à fonctionner.
  5. Enfin, la valeur yyyy-MM-dd du champ de saisie à afficher doit être analysée et remplacée par sa contrepartie souhaitée.

Donc, voici le code, en utilisant Modernizr pour détecter si le client est capable de restituer en natif les champs de saisie de la 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));
        }
    });
}
10
Vincent Sels

Comme @ Pawel-Dyda l’a mentionné,

getDate () méthode

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, SQL ou autre.

Exemple d'analyse MySQL:

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

Résultats:

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

Solution fonctionnant 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>
}
0
Muflix

En principe, vous devriez not reformater la date. Au lieu de cela, vous devez lire l’objet Date de JavaScript à partir de Datepicker, via getDate () method. Ensuite, vous devez le transmettre au serveur.
La question est de savoir comment. Fondamentalement, ce que vous voulez, c'est un format commun. Si vous utilisez JSON, la réponse est très simple, il suffit de mettre un objet date et la fonction stringify () de JSON le formatera automatiquement en ISO8601 .

Comme vous pouvez le constater sur Wikipedia, ISO8601 a été conçu pour permettre un échange fiable de la date et de l'heure. C'est donc ce que vous devez utiliser.
Il peut être utile de savoir que les navigateurs Web modernes prennent en charge la méthode toISOString() de l'objet Date.

0
Paweł Dyda

Il semble que quelqu'un d'autre ait eu cette question ou une question similaire avant la vôtre. 

Si vous lisez ce stackoverflow answer , l'auteur essayait d'afficher la date dans un format et de transmettre les données à MySQL dans un autre format. 

La réponse précédente dans ce lien vous permet d’être configuré pour accéder à la valeur sélectionnée en tant que variable. Maintenant, tout ce dont vous avez besoin est de câbler une analyse parDate à la variable de 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>

Vérifiez le lien parseDate pour connaître les paramètres et le formatage.

J'espère que cela t'aides!

0
Bechard