Disposition brisée

J’utilise jQuery Mobile dans mon application Web. Il y a un datepicker qui remplace le datepicker par défaut de l’interface utilisateur jQuery.

Voici la source: https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker

Le fichier JavaScript qui le remplace est ici: https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

J’ai cette ligne de code:

$(".ui-page").live("pagecreate", function(){ $("input[type='date'], input[data-type='date']").each(function(){ $(this).after($("").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true })); }); });

Dans ce cas, j’ai un sélecteur de date qui est toujours visible. Pour que la visibilité ne soit visible que si un utilisateur clique sur un champ de texte de date, le sélecteur de date doit être connecté au champ de saisie, ce qui n’est pas le cas ici. Je dois donc supprimer le .after("

") . Mais alors, le design du datepicker est totalement cassé, il semble que la réécriture du datepicker ne prenne pas effet, car les styles CSS ne sont pas appliqués.

Alors, qu’est-ce qui ne va pas ici?

Merci d’avance. Meilleures salutations.

Pour résoudre le problème du calendrier, il vous suffit de changer un sélecteur dans le code de Squish

  $( '.ui-datepicker-calendar a' ).live('click', function() { $( '.hasDatepicker' ).hide('slow'); });

Exemple ici

Créer ceci dans une boîte de dialog est aussi simple, il suffit de le placer dans un autre fichier HTML et de l’appeler ainsi

 Open dialog

Documentation de dialog

C’était ma solution

 $( ".ui-page" ).live( "pagecreate", function(){ $( "input[type='date'], input:jqmData(type='date')" ).each(function(){ $(this).after( $( "
" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) ); }); $('.hasDatepicker').hide(); $( "input[type='date'], input:jqmData(type='date')" ).click(function(){ $(this).next('.hasDatepicker').show(); }) $( '.ui-datepicker-calendar a' ).live('click', function() { $( '.hasDatepicker' ).hide('slow'); }); });

Vous aviez raison, je m’excuse de ne pas l’avoir mise en œuvre correctement la première fois.

Cela devrait résoudre votre problème:

Il va masquer votre calendrier lors du chargement, l’afficher lorsque l’entrée est active (cliquer sur ou sur l’onglet) et la masquer à nouveau dès qu’une date est sélectionnée (sans interférer avec le changement de mois).

 $(function() { $( '.hasDatepicker' ).hide(); $( '#date' ).focus(function() { $( '.hasDatepicker' ).show('slow'); }); $( '.ui-body-c a' ).live('click', function() { // .live() event important //or else clicks stop functioning //after first selection $( '.hasDatepicker' ).hide('slow'); }); });

Voici l’exemple live

J’ai eu le même problème avec deux datepickers dans la même page. C’était ma solution:

Code HTML:

entrez la description de l'image ici

Cela a été testé dans le navigateur Safari.
Inspectez l’élément d’entrée de date.
Regardez ça, dans le
. il y a une nouvelle DIV qui a été créée dinamically et a cette id = “dp1298574069963”. Je l’ai capturée dans une variable ( var idDivStart = $("#startPicker div").attr("id"); ) et l’utilisais comme variable pour spécifier que tous les éléments de cette div ayant la classe ui-datepicker seraient affichés ( $("#"+idDivStart+" .ui-datepicker").show(); ).

Code JS:

 $(function() { $(".ui-datepicker").hide(); // startDate datepicker var idDivStart = $("#startPicker div").attr("id"); $("#startDate").focus(function() { $("#"+idDivStart+" .ui-datepicker").show(); }); // endDate datepicker var idDivEnd = $("#endPicker div").attr("id"); $("#endDate").focus(function() { $("#"+idDivEnd+" .ui-datepicker").show(); }); // $(".ui-datepicker-calendar a").live("click", function() { $(".ui-datepicker").hide(); }); // $(".inputsText").focus(function() { $(".ui-datepicker").hide(); }); // $("div").attr("tabindex",-1).focus(function() { $(".ui-datepicker").hide(); }); });

J’espère vous aider.

L’auteur de mobile datepicker a un exemple de fonctionnement sur sa page git.

Il masque le sélecteur de date et affiche une zone de saisie comme prévu. Quelle est exactement la différence entre votre implémentation et la norme? Pouvez-vous donner un extrait de travail de ce que vous faites? Vous pouvez le marquer sur JSBin si vous pensez que ce sera plus facile.

J’ai eu un problème similaire en travaillant avec deux dates et cela a fonctionné:

Balisage (C # MVC3):

   <%: Html.LabelFor(model => model.fooDate1) %> <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary{{"type", "date"}, {"id", "fooDate1"}})%> <%: Html.ValidationMessageFor(model => model.fooDate1)%> 
  <%: Html.LabelFor(model => model.fooDate2) %> <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary{{"type", "date"}, {"id", "fooDate2"}})%> <%: Html.ValidationMessageFor(model => model.fooDate2) %>

Scénario: