Comment faire en sorte que jqueryUI datepicker se soumette dans un format différent de celui affiché?

Je travaille sur une internationalisation en utilisant jQueryUI. J’ai un contrôle DatePicker sur un formulaire qui fonctionne correctement dans la langue française.

Lorsque je sélectionne une date, par exemple le 15 août 2012, le DatePicker affichera 15 Aoû, 2012 comme je l’espérais. Mon problème, cependant, est que lorsque le formulaire est publié, la valeur du DatePicker est affichée sous la forme «15 Aoû, 2012», qui doit maintenant être traduite sur le serveur avant de pouvoir être enregistrée correctement.

Ma question est la suivante: y a-t-il un moyen intégré dans jQueryUI DatePicker pour que je puisse toujours le publier sur le serveur dans un format cohérent, quelle que soit la langue d’affichage du contrôle? S’il n’y a pas de manière intégrée, quelles sont les options pour y parvenir?

Je me rends compte que je peux changer le format de date à quelque chose comme 15/08/2012 au lieu d’utiliser la représentation textuelle, mais ce n’est pas ce que je veux faire.

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 format altFormat. Normalement, vous voudrez faire du champ altField un champ caché, vous pouvez ignorer le champ normal et envoyer à db le champ altField.

Comme vous avez pu le constater, fournir un format dateFormat fonctionne bien pour les nouvelles dates saisies , mais ne modifie pas l’atsortingbut de value déjà fourni au champ de saisie 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 le résout. Peut-être aider d’autres personnes avec le même problème à l’avenir. 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 avoir déjà un atsortingbut de value fourni au format yyyy-MM-dd , comme spécifié par le W3C .
  2. Certains navigateurs auront 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 doivent s’attendre et stocker une date dans le format susmentionné, tout en les rendant selon les parameters régionaux du client. Vous n’avez probablement pas besoin / besoin de créer un datepicker jqueryui dans ces navigateurs.
  3. Les navigateurs qui ne disposent pas d’un contrôle intégré pour gérer les champs de saisie de date auront besoin du datpicker jqueryui avec un champ “alt” invisible.
  4. Le champ de saisie invisible, avec le format yyyy-MM-dd , doit avoir le nom d’origine et un identifiant unique pour que la logique des formulaires continue de fonctionner.
  5. Enfin, la valeur yyyy-MM-dd du champ de saisie doit être analysée et remplacée par la contrepartie souhaitée.

Donc, voici le code, en utilisant Modernizr pour détecter si le client est capable ou non de rendre nativement des champs de saisie 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 autre avant la vôtre.

Si vous lisez cette réponse stackoverflow , 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 de définir la valeur sélectionnée comme variable. Maintenant, tout ce dont vous avez besoin est de relier une parseDate à votre variable de date sélectionnée.

  

Vérifiez le lien parseDate pour les parameters et le formatage.

J’espère que cela t’aides!

En gros, vous ne devez pas reformater la date. Au lieu de cela, vous devriez lire l’object Date de JavaScript de Datepicker, via la méthode getDate () . Ensuite, vous devez le transmettre au serveur.
La question est comment. En gros, ce que vous voulez, c’est un format commun. Si vous utilisez JSON, la réponse est très simple: placez simplement l’object date et la fonction ssortingngify () de JSON le formatera automatiquement en ISO8601 .

Comme vous pouvez le voir sur Wikipedia, ISO8601 a été conçu pour échanger de manière fiable la date et l’heure.
Il peut être utile de savoir que les navigateurs Web modernes prennent en charge la méthode toISOSsortingng() l’object Date.

Comme l’a mentionné @ Pawel-Dyda, il y a un

Méthode getDate ()

 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’parsingr en Javascript, PHP, SQL ou autre.


Exemple d’parsing 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 

Solution fonctionnant pour ASP.NET

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