L'icône JQuery DatePicker n'apparaît qu'après avoir cliqué sur la zone de texte

Question

J'utilise le contrôle jPage DatePicker dans une application ASP.NET MVC.

J'ai créé un contrôle appelé DateTime.ascx, de sorte que chaque fois que j'appelle la méthode Html.TextBoxFor() en lui passant un champ de type DateTime, ce contrôle entre en jeu et un textbox + datepicker est rendu, remplaçant la norme fonctionnalité qui produit juste une zone de texte.

C'est le contrôle:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %> 
<%=Html.TextBox("", 
    (Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : DateTime.Today.ToShortDateString()), 
    new { @class = "UseDatePicker" })%> 

Et voici un exemple d'appel:

<%: Html.EditorFor(model => model.Project.IssueDate)%> 

Maintenant, je ajoute aussi sur la page principale d'un script appelé DatePickerConfig.js qui, bien, configure le datpicker. Ici, il est:

$(document).ready(function() { 
    $(".UseDatePicker").live('click', function() { 
     $(this).datepicker('destroy').datepicker({ 
      showOn: "both", 
      buttonImage: "../../Content/calendar.gif", 
     buttonImageOnly: true, 
      changeMonth: true, 
      changeYear: true 
     }).focus(); 
    }); 
}); 

Maintenant, mon problème: quand la page se charge, seule une zone de texte pour la modification du champ datetime. Lorsque je clique sur la zone de texte, le calendrier sort comme prévu, et en même temps l'image du bouton apparaît. Ce que je voudrais, c'est que l'image buttonn soit visible dès le chargement de la page et avant que l'utilisateur commence à interagir avec le contrôle.

Merci.

Answer 1

Le problème est que vous ne liez pas la datepicker jusqu'à ce que vous cliquiez sur la zone de texte, il n'y a donc aucun bouton à lier jusqu'à ce que les charges. Vous devriez juste lier le "datepicker", y a-t-il une raison pour que vous vous détachez et que vous reliiez chaque clic de bouton? Selon votre explication actuelle, ce serait plus logique:

$(document).ready(function() { 
    $(".UseDatePicker").each(function(i) { 
     $(this).datepicker({ 
      showOn: "both", 
      buttonImage: "../../Content/calendar.gif", 
      buttonImageOnly: true, 
      changeMonth: true, 
      changeYear: true 
     }); 
    }); 
}); 

Cela passera par chaque champ et attend un datepicker lier le sélecteur à cette zone de texte.