jQuery Mobile -> Remplacer jQuery UI Datepicker -> Mise en page cassé

Je suis à l'aide de jQuery Mobile dans mon application web. Il y a un datepicker qui remplace la valeur par défaut de jQuery UI datepicker.

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($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true }));
    });
});

Dans ce cas, j'obtiens un datepicker qui est toujours visible. Pour avoir de la visibilité que si un utilisateur clique sur une date de champ de texte, le datepicker doit être connectée à l'entrée du domaine, qui n'est ici pas le cas.
J'ai donc supprimer le .after("<div />"). Mais alors, la conception de la datepicker est totalement cassé, il semble que la réécriture de la datepicker n'a aucun effet, parce que les styles CSS ne sont pas appliquées.

Alors, quel est le problème ici?

Merci d'avance & Meilleures Salutations.

J'ai également découvert une face cachée de lib jQuery: jquerymobile.com/test/js qui est le jQuery UI Widget. Ne sais pas si cela aide

OriginalL'auteur Tim | 2011-02-03

2

Pour fixer le calendrier de problème vous avez juste besoin de changer un sélecteur de Déployer du code
```
 $( '.ui-datepicker-calendar a' ).live('click', function() {
   $( '.hasDatepicker' ).hide('slow');
  });
```
Exemple Ici

La création de ce dans une boîte de dialogue est très simple, il suffit de le mettre dans un autre format html et l'appeler comme
```
<a href="foo.html" data-rel="dialog">Open dialog</a> 
```
Boîte De Dialogue Documentation

Votre solution fonctionne. Malheureusement, la boîte de dialogue est une fenêtre séparée, il serait plus agréable si c'est comme le jQuery UI superposition. Mais j'ai un autre problème: j'ai 2 champs de saisie sur un site et donc à la fois d'ouverture et de fermeture si je clique dans l'un d'eux. Voici l'exemple: jsbin.com/upeyo5/4

OriginalL'auteur Blowsie

C'était ma solution

$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).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');
      });
});

OriginalL'auteur Swap

1

Vous aviez raison, je m'excuse de ne pas appliquer correctement la première fois.

Cela devrait résoudre votre problème:

Il permet de masquer votre calendrier sur la charge, de la présenter lors de l'entrée est dans le focus (cliqué sur ou à onglets) et de le cacher à nouveau dès qu'une date est sélectionnée (mais ne sera pas interférer avec commutation 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

Je vous remercie pour votre aide. Le problème est le passage du mois, comme vous l'avez mentionné. Ayant aussi le datepicker comme une superposition serait mieux et j'ai l'jQuery UI Datepicker fonctionnalité lors de la liaison à la zone de saisie, de sorte que le problème avec les mois seront résolus et j'ai la superposition de la fonctionnalité.

OriginalL'auteur Squish

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

Code HTML:

<div data-role="fieldcontain">
   <div id="startPicker">
      <input type="date" name="startDate" id="startDate" value=""/>
   </div>
   <div id="endPicker">
     <input type="date" name="endDate" id="endDate" value=""/>
   </div>    

</div>

jQuery Mobile -> Remplacer jQuery UI Datepicker -> Mise en page cassé

Cela a été testé dans le navigateur Safari.
Inspecter la date d'entrée de l'élément.
Regard qui, à l'intérieur de la <div data-role="fieldcontain" ...>. il y a un nouveau DIV qui a été créé dinamically et a cette id="dp1298574069963". J'ai capturé dans une variable (var idDivStart = $("#startPicker div").attr("id");) et de l'utiliser de variable pour spécifier que tous les éléments à l'intérieur de cette Div qui a de l'interface utilisateur-datepicker classe seront affichées ($("#"+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 pouvoir vous aider.

OriginalL'auteur Yaz

0

L'auteur de mobile datepicker a un fonctionnement exemple sur son git page.

Il cache le datepicker et affiche une zone de saisie comme prévu. Quelle est exactement la différence entre votre application et le standard? Pouvez-vous donner un travail extrait de ce que vous faites? Vous pouvez le marquer sur JSBin si vous sentez que ça va être plus facile.

L'exemple ne pas masquer le datepicker! Il est appliqué sur une div, mais elle doit être appliquée sur le champ de saisie lui-même, de sorte qu'il ne sera pas affiché lorsque après laoding la page. C'est le comportement normal de l'jQuery UI datepicker et de celui-ci.

OriginalL'auteur Squish

-1

J'ai eu un problème similaire de travail avec deux dates et cela a fonctionné:

De balisage (C# MVC3):

    <div data-role="fieldcontain" id="fooDate1Div">
        <%: Html.LabelFor(model => model.fooDate1) %>
        <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate1"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate1)%>
    </div>

    <div data-role="fieldcontain" id="fooDate2Div">
        <%: Html.LabelFor(model => model.fooDate2) %>
        <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate2"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate2) %>
    </div>

Script:

<script>
    $(function () {
        $(".ui-datepicker").hide();

        //fooDate1 datepicker
        var idDivStart = $("#fooDate1Div div").attr("id");
        $("#fooDate1").focus(function () {
            $("#" + idDivStart + " .ui-datepicker").show('fast');
        });

        //followUp datepicker
        var idDivEnd = $("#fooDate2Div div").attr("id");
        $("#fooDate2").focus(function () {
            $("#" + idDivEnd + " .ui-datepicker").show();
        });

        $(".ui-datepicker-calendar a").live("click", function () {
            $(".ui-datepicker").hide();
        });
    });    
</script>

OriginalL'auteur Livewire

Vous devez vous connecter pour publier un commentaire.