J'ai besoin d'aide avec l'utilisation de DatePicker dans l'application mobile.
J'utilise le jQuery UI DaidPicker dans mon application. Mais le dayskicker est montrant deux fois (duplicata) lorsque je le mets dans la deuxième page. Toutefois, lorsque je mets le satdatpicker dans la première page, il est affiché OK. P>
Ceci est un exemple, si vous l'exécutez, vous pouvez voir que la datePicker est duplicaté à la deuxième page. P>
<!DOCTYPE html>
<html>
<head>
<title>Datepicker Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>
<script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>First page</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#secondPage">Next page with a Datepicker</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>Second page</h1>
</div><!-- /header -->
<div data-role="content">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
3 Réponses :
Enfin, nous avons eu une solution de l'un de mes chefs de projet. Nous devons faire un travail autour de jquery.ui.datepicker.mobile.js.
Remplacez la méthode suivante à l'aide du code ci-dessous.
Merci à ce que cela corrige le problème de la mise en page multi-datères, mais je souhaite toujours masquer / montrer la mise au point: Stackoverflow.com/Questtions/5005565/...
Nous avons eu ce travail mais il a fallu des faffing:
Dans le nouveau MOBILE DATEPICKER JS, déplacez la fonction UpdateAtAtPicker () en dehors de la portée de la fonction de remplacement fn.datePicker afin que cela puisse être appelé n'importe où et le modifier pour supprimer tout «DP» SAFFING, comme: p>
Fonction UpdatedatedatePicker () { p>
$( ".ui-datepicker-header"/* , dp */ ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$( ".ui-datepicker-prev, .ui-datepicker-next"/* , dp */ ).attr("href", "#");
$( ".ui-datepicker-prev"/* , dp */ ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
$( ".ui-datepicker-next"/* , dp */ ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
$( ".ui-datepicker-calendar th"/* , dp */ ).addClass("ui-bar-c");
$( ".ui-datepicker-calendar td"/* , dp */ ).addClass("ui-body-c");
$( ".ui-datepicker-calendar a"/* , dp */ ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a.ui-state-active"/* , dp */ ).addClass("ui-btn-active"); // selected date
$( ".ui-datepicker-calendar a.ui-state-highlight"/* , dp */ ).addClass("ui-btn-up-e"); // today"s date
$( ".ui-datepicker-calendar .ui-btn"/* , dp */ ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
};
dans la jquery.ui.datepicker.js ajoutez un appel à mettre à jourAtPicker (); À la fin de la fonction _updaturateAtATEATEATEAU P> LI>
Dans le Mobile DatePicker CSS, changez la classe UI-DatePicker à ressembler à: .ui-date-datePicker {Overflow: visible; marge: 0; max-largeur: 500px; min-largeur: 300px; largeur: 50%; } p> li>
Modifiez la fonction de liaison DatePicker pour ressembler à ceci: p>
// se lie à la pageCreate pour améliorer automatiquement les entrées de la date de la date
$ (".ui-page") .Live ("PageCreate", fonction () {
$ ("entrée [type = 'date']] Entrée [Type de données = 'date']") .Ce (fonction () {
$ (ceci) .DatePicker ({Altfield: "#" + $ (this) .attr ("id"), showotherMonshs: true});
});
}); p> li>
ol> p>
Old Post, mais toujours pertinent apparemment.
J'ai été confronté au même problème. Voici ce que j'ai fait. La solution consistait à masquer la classe HasdatePicker et à montrer l'identifiant spécifique datationPicker que je veux. P>
en html, je enveloppe le sélecteur de date dans un DIV avec un ID: P>
$(".hasDatepicker:eq(1)").hide();
Honnêtement, JQuery Mobile est un projet très expérimental et a toujours de nombreux bugs
Ce n'est pas une réponse, mais devrait aider - tout ce que vous le ferez fonctionnera mieux si vous conservez une page
div dans chaque fichier HTML. Les widgets ont des problèmes avec les fichiers HTML et les fichiers HTML multipage sont traités différemment entre JQM Alpha2 et Alpha3 - cassé mes widgets personnalisés également.Aussi j'ai trouvé une jquyery libetée cachée: jquerymobile.com/test/js qui est le widget UI JQuery UI . Je ne sais pas si cela aide