Comment implémenter DATE PICKER dans PhoneGap / Android?

J'ai essayé d'implémenter le sélecteur de date dans Android. Je souhaite que les données soient obtenues et qu'elles s'affichent dans le format de texte

<html> <head> <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script> <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script> <script type="text/javascript" charset="utf-8"> function dateTest() { var myNewDate = new Date(); window.plugins.datePicker.show({ date : myNewDate, mode : 'date', // date or time or blank for both allowOldDates : true }, function(returnDate) { var newDate = new Date(returnDate); currentField.val(newDate.toString("dd/MMM/yyyy")); // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus. currentField.blur(); }); } </script> </head> <body bgcolor="#ffffff"> <hr>DatePicker Test<hr><br> <input type="button" onClick ="dateTest()" value ="Today's Date!!" /> <div id="view"></div> </body> </html>

Je l'ai comme une alerte … mais impossible de le stocker en tant que chaîne sur la même page

Pourquoi perdre votre tête?

A <input type="date"> déduit toujours l'interprétation de l'appareil, dans certains appareils Android il ne fonctionne même pas,

Il existe de nombreux plugins, addons, quoi qu'il en soit, pour cela,

Personnellement, j'aime, et j'utilise mobiscroll: Link

Pour l'aide, je pense que Mobiscroll est payé ?, n'est-ce pas.

Il semble que votre CurrentField soit indéfini. Avez-vous vérifié la console chrome avant de l'utiliser sur AVD? Essayez d'afficher l'élément dans lequel vous essayez d'afficher la date également.

Pour l'instant, je suppose que vous essayez de faire ce que fait le code suivant

 $('.nativedatepicker').focus(function(event) { var currentField = $(this); var myNewDate = new Date(Date.parse(currentField.val())) || new Date(); // Same handling for iPhone and Android window.plugins.datePicker.show({ date : myNewDate, mode : 'date', // date or time or blank for both allowOldDates : true }, function(returnDate) { var newDate = new Date(returnDate); var newString = newDate.toString(); newString = newString.substring(0,15); currentField.val(newString); // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus. currentField.blur(); }); });

L'élément est le suivant

 <input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>

Fonctionne comme un charme !! J'espère que cela aide !!

Ce que je veux faire est simple: je veux juste qu'un diapather s'affiche lorsque je clique sur un certain champ.

Cependant, comme Aleks, je ne sais pas quoi mettre dans mon html, comment l'utiliser en html, et que dois-je mettre dans le html pour invoquer le codeur de date sur une entrée.

La documentation du plugin est incomplète.

J'ai trouvé une solution à partir de ce projet de test . Les étapes sont les suivantes:

Pré-requis: phonegap / cordova-cli installé
Installez le plugin de périphérique de Cordova: $ cordova plugin add org.apache.cordova.device
Installez le plugin DatePicker de Dirk: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
Copiez le nativedatepicker.js du projet de test et placez-le sur le dossier js de votre projet. Ce fichier comporte les fonctionnalités showDatePicker(), showDateTimePicker() .
Ajouter le ff. Au code index.html :

Remarque: Le datepicker ne s'affichera pas lorsque vous l'éprouvez dans votre navigateur

 .... <div class="form-group"> <label>Appointment</label> <input type="text" class="form-control datepicker" id="appointment"> </div> .... <script src="js/nativedatepicker.js"></script> <script src="cordova.js"></script> <script type="text/javascript"> (function($){ $(document).ready(function () { $(document).on('click', '.datepicker', function () { showDatePicker($(this), 'date'); }); $(document).on('click', '.timepicker', function () { showDatePicker($(this), 'time'); }); $(document).on('click', '.datetimepicker', function () { if (device.platform === "Android") showDateTimePicker($(this)); else showDatePicker($(this), 'datetime'); }); }); })(jQuery); </script>

C'est ma mise en œuvre pratique. Le type d'entrée est le texte, en lecture seule.

 $('.nativedatepicker').focus(function(event) { var currentField = $(this); var myNewDate = new Date(); window.plugins.datePicker.show({ date : myNewDate, mode : 'date', allowOldDates : true }, function(returnDate) { var array = returnDate.split("/"); var day = array[2], month = array[1]; if (day <= 9) day = "0" + day; if (month <= 9) month = "0" + month; currentField.val(array[0] + "/" + month + "/" + day); currentField.blur(); }); });

Pourquoi souhaitez-vous implémenter un sélecteur de date personnalisé s'il existe un système disponible?

Vous pouvez simplement utiliser <input type="date"> pour créer le sélecteur de date iOS communément connu.

Pour plus d'informations sur les champs de saisie sur les appareils mobiles, je suggère: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience