none
JQuery UI Datepicker - non visible dans input lors chargement formulaire RRS feed

  • Discussion générale

  • Bonjour,

    j'utilise JqueryUI Datepicker pour afficher des beaux calendriers dans mes inputs date.
    Le problème est que lorsque le formulaire n'est pas validé (postback) on revient dessus et les champs sont vides. Par contre en analysant le code HTML de retour j'ai bien "value=XX-XX-XXXX" dans les champs mais cette valeur n'est pas affichée dans les champs.

    Voici un peu de code :
    MasterPage :

    <script type="text/javascript">
      $(function () {
       $(".datepicker").datepicker({ firstDay: 1 });
       $(".datepicker").datepicker("option", "dateFormat", 'dd-mm-yy');
       $(".datepicker").datepicker("option", "showButtonPanel", true);
       $(".datepicker").datepicker("option", "buttonImage", '../../Content/Images/calendar2.gif');
       $(".datepicker").datepicker("option", "showOn", "both");
       $(".datepicker").datepicker("option", "buttonImageOnly", true);
      });
     </script>
    



    Champs de la vue formulaire :

    <tr>
           <td><%: Html.LabelFor(m => m.DateFinT)%></td>
           <td><%: Html.TextBoxFor(m => m.DateFinT, new { @class = "datepicker" })%>
            <%: Html.ValidationMessageFor(m => m.DateFinT, "*")%>
           </td>
          </tr>


    Html du retour du formulaire:

    <tr>
           <td><label for="DateFinT">Date fin prévisionnelle</label></td>
           <td><input class="datepicker" data-val="true" data-val-regex="Format incorrect" data-val-regex-pattern="([0-9]{1,2})-([0-9]{1,2})-([0-9]{4})" data-val-required="Le champ Date fin pr&amp;#233;visionnelle est requis." id="DateFinT" name="DateFinT" type="text" value="21-04-2011" />
    
            <span class="field-validation-valid" data-valmsg-for="DateFinT" data-valmsg-replace="false">*</span>
           </td>
          </tr>


    La VALUE du champs est bien présente !


    => et lors du retour du formulaire le champs n'est pas invalidé (absence de caractère).

    J'ai pas mal googlé (apriori datepicker ne se recharge pas au postback) mais les réponses que j'ai trouvé portaient sur les webform.


    J'ai fait la même manip en instanciant mon modele et en l'affichant dans un formulaire, même problème...

    Avez vous une idée ?

    Merci par avance.

    @+.


    • Type modifié Ciprian Duduiala mercredi 18 mai 2011 06:43 pas de réponse de l'utilisateur qui a lancé la question
    mardi 10 mai 2011 15:27

Toutes les réponses

  • Bonjour,

    Pouvez-vous nous préciser la version de Jquery UI Datepicker utilisée, la version MVC et comment vous faites la validation (voir le code m’aidera beaucoup) ? Merci !

     

    Cordialement,

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.


    lundi 16 mai 2011 11:18
  • Bonjour,

    J'utilise JQuery 1.5.1 et JQuery UI 1.8.11 :

      <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    

    Je ne fais pas beaucoup de validation :

    Modele :

    [Display(Name = "Date fin réelle")]
        public string DateFinR { get; set; }
    

    Controlleur :

    [HttpPost]
        public ActionResult CreerContrat(int id, ContratModele model, string submitButton)
        {
          if (ModelState.IsValid)
          {
    ...
    
    }
     else return View(model);
    

    Merci par avance.

    @+

    lundi 23 mai 2011 07:38
  • Bonjour,

    La source de votre erreur est le format utilisée pour votre date. Il semble que le contrôle DatePicker fait une inversion entre le jour et le mois et 21-04-2011 et vue comme le jour 4 de mois 21 qui n’existe pas et donc la date ne peut pas être affichée dans votre TextBox. Essayez à changer le format en dd-MM-yy, par exemple. Vue que la validation est assez simple, vous pouvez aussi essayer a faire la validation au client (voir cet exemple).

    Bonne journée,

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mardi 24 mai 2011 11:20
  • Bonjour (et désolé de la réponse tardive),

    effectivement c'était un problème de Format. Il n'aimait pas les tiret (dans la date) et le fait que le type de Date dans mon modele soit un string;

    J'ai donc modifié cela (ce n'est pas très grave d'avoir des / au lieu des -):

     

    	  $(".datepicker").datepicker("option", "dateFormat", 'dd/mm/yy');
    

     

    et dans mon model :

     

      [Display(Name = "Date envoi")]
      [DataType(DataType.Date)]
      public DateTime Date
      {
       get;
       set;
      }
    

     

    Dans ma vue j'ai toujours cette ligne la :

     

         <%: Html.TextBoxFor(m => m.Date, new { @class = "datepicker", style = "width:70px;" })%>
    
    qui pose problème pour la value

     

    Dans l'exemple que tu m'as donné il utilise ça :

     

     @model DateTime
     @Html.TextBox("", Model.ToString("dd/MM/yyyy"), 
          new { @class = "date" })
    
    
    
    pour le bon format... mais je ne sais pas comment faire le matching avec mon Model...

     

     

    Maintenant le problème est que si je rentre dans mon champs 10/01/2011 et que je valide (il doit y avoir une convertion en datetime), il sera affiché 01/10/2011 (à cause du format) et ça continue de  changer.

     

    Remarque : Si j'utilise le format anglais pour Datepicker mm/dd/yy... ça rappel bien la date MAIS lors de la validation du model, la date n'est pas valide (si dd > 12) mais mon utilisateur est français et nous c'est dd/mm/yy.

    Avez vous une solution ?

     

    Merci.

    @+,

    Tid.


    • Modifié Tid- mardi 31 mai 2011 08:03 après test, la validation du modele n'est pas sur la remarque
    mardi 31 mai 2011 07:25
  • Bonjour,

    C’est toujours un problème de format et je crois qu’il est lié à la localisation de votre calendrier. Si localiser le calendrier ne résoudre pas le problème, essayez avec le format que j’ai indiqué dans le post précèdent : dd-MM-yy. La date 31-05-2011 deviendra 31-Mai-2011, mais au moins ce le bon ordre.

     

    Cordialement,

     

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mardi 31 mai 2011 08:08
  • Bonjour et merci de ta réponse,

     

    je viens de faire comme vous avez dit :

     

    	  $(".datepicker").datepicker("option", "dateFormat", 'dd/MM/yy');
    

     

    Donc  quand je sélectionne la case dans mon calendrier : 23/May/2011...

     

    En validant mon formulaire avec une erreur, l'input ne se re-remplit pas ! pourtant en html j'ai cela :

     

    <input id="Date" class="datepicker hasDatepicker" type="text" value="23/May/2011" style="width:70px;" name="Date" data-val-required="Le champ Date envoi est requis." data-val="true">
    

     

    donc la value est bien notée... mais ne s'affiche pas dans l'input

     

    j'ai l'impression de tourner en rond...


    mardi 31 mai 2011 08:22
  • Bonjour,

    Vous avez raison. Il semble que seulement le format mm/dd/yy passe la validation. Concernant l’exemple sur la validation que je vous ai donné, vous dites que vous ne savez pas comment faire le matching avec le Model. Avez-vous consulte le code source qui est disponible à la fin de ce tutoriel pour voir comment faire le matching ?

     

    Sinon, essayez à adresser votre question sur le format sur le forum jQuery peut-être ils peuvent vous donner plusieurs informations sur ce sujet.

     

    Cordialement,

     

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mardi 31 mai 2011 11:01
  • Rebonjour,

    Bon, je peux me contenter de travailler avec mm/dd/yy.

    Si je travaille avec par contre, je ne peux plus utiliser de DateTime dans mon model mais un String classique (car le mois est devant)... sinon le model le prend comme un dd/MM/yyyy ce qui est faux.

    Donc la solution n'est pas idéale car j'utilise un format anglais sur un site français et un string à la place d'un datetime pour mon model et donc mise en place d'une validation regex.

    De plus, si j'utilise mm/dd/yy, je ne sais pas comment empecher la validation propre d'une date en string de ce type : 02/31/2011, mes controlleurs vont avoir beaucoup de travail !

     

    Je vais me satisfaire de ça pour le moment, merci de vos réponse et de votre temps.

    Si quelqu'un a une solution plus propre n'hésitez pas !

    Cordialement,

    Emilien.

     


    mardi 31 mai 2011 11:37