Comment mettre en œuvre le SÉLECTEUR de DATE dans PhoneGap/Android?

J'ai essayé de mettre en œuvre le sélecteur de date dans android. Je veux obtenir les données et l'afficher dans le format 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 suis comme un système d'alerte...mais incapable de le stocker en tant que chaîne de caractères sur la même page

InformationsquelleAutor user | 2013-06-21

7

Pourquoi lâche ur de la tête?

Un <input type="date"> sera toujours deppend sur l'appareil de l'interprétation de celle-ci, dans certains appareils android elle ne fonctionne même pas,

Il y a beaucoup de plugins, addons, que ce soit, pour elle,

Personnellement, je l'aime, et l'utilisation mobiscroll: Lien

Edit: Mobiscroll est maintenant payant, mais il y a des charges de gratuit interface mobile cadres et probablement tous d'entre eux ont un datepicker, comme jQuery Mobile-datepicker.
- Enoque Duarte,oui j'ai vérifié la démo. J'ai remarqué que vous unablw pour sélectionner la date, le SAMEDI et le DIMANCHE? pourquoi est-il?
- j'ai une confusion,doit-on copier les fichiers à partir de ici? ce qui devrait tous nous avons? je n'oublies pas..j'ai vu ce site hier..en précisant qu'il a besoin du particulier JS et certains zepto JS et tout et tout...mais je suis incapable de trouver cette page,maintenant..merci de me guider!!
- sûr pas de problème, le js et .css, vous devez inclure le deppends sur le datepicker style que vous choisissez, vous devez aussi inclure jquery+jquerymobile, Vous pouvez télécharger tous les fichiers ici: github.com/acidb/mobiscroll , Vérifiez les index.html, garder le <header>, supprimer tous les corps, et puis collez le code html + js à partir de la costumized datepicker que vous avez fait dans le demo.mobiscroll.com/datetime maintenant, regardez à l'en-tête, et par exemple, si vous ne l'utilisez pas des traductions, vous pouvez supprimer tous les xx.i18n.xx fichiers, puis, si vous utilisez iOS style, vous pouvez supprimer le android .css et .js, etc
- qu'est-ce que la traduction? Je vais utiliser seulement pour android
- J'ai remarqué que je suis incapable de choisir la date, le SAMEDI et le DIMANCHE? pourquoi est-il? DANS LA DÉMO
- S'il vous plaît,répondre mes questions dans les 2 derniers Commentaires.
- traductions est la fonction de traduire date de mois à l'autre langue, comme l'espagnol, le français, etc, Vous ne pouvez pas sélectionner le samedi et le dimanche parce que les paramètres actuels sur du code javascript, regarder la ligne suivante: invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },, la propriété non valide est la définition de ce jour 0 (dimanche) et le jour 6 (samedi) ne sont pas valides pour choisir
- J'utilise ce pour android ionique dans les app. Il fonctionne très bien mais je fais cette entrée cachés et de tir cliquez sur l'événement lorsque l'utilisateur clic sur les div de sorte qu'il ne fonctionne pas. une idée?
InformationsquelleAutor Enoque Duarte

Il semble que votre currentField est pas défini. Avez-vous vérifié le chrome de la console avant de l'exécuter sur les AVD ? Les Pls essayer de poster l'élément dans lequel vous essayez d'afficher la date.

Pour l'instant, je suis en supposant que vous essayez de faire ce que le code suivant ne

$('.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 comme suit

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

Fonctionne comme un charme !! Espérons que cela aide !!

InformationsquelleAutor bala

2

Ce que je veux est simple je veux juste un datepicker pour afficher lorsque je clique sur un certain domaine.

Cependant, le même que Aleks, je ne sais pas quoi mettre dans mon code html, comment l'utiliser en html, et que dois-je mettre dans le code html pour invoquer le datepicker sur une entrée.

La documentation de la plugin est incomplète.

J'ai trouvé une solution à partir de ce projet de test.
Les étapes sont comme suit:
1. Pré-requis: phonegap/cordova-cli installé
2. Installer Cordova est appareil plugin: $ cordova plugin add org.apache.cordova.device
3. Installer de Dirk datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
4. Copiez le nativedatepicker.js du projet de test et de le placer sur votre projet js dossier. Ce fichier a showDatePicker(), showDateTimePicker() les fonctions de confort.
5. Ajouter les ff. pour index.html code:
Remarque: Le datepicker de ne pas s'afficher lorsque vous testez 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>
```
- dans votre code, comment je vais minDate dans votre js
- Je suis en utilisant la saisie de type date pour android ionique dans les app. Il fonctionne très bien mais je fais cette entrée cachés et de tir cliquez sur l'événement lorsque l'utilisateur clic sur les div de sorte qu'il ne fonctionne pas. une idée?
InformationsquelleAutor Jonathan

C'est mon travail de mise en œuvre. Type d'entrée est du 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();
        });
    });

ok,Est-il une erreur dans le code ont-ils exécutés? de toute façon vais essayer sur ce code et vous le fait savoir.
witpok,pourriez-vous me dire comment ça fonctionne...j'ai ceci dans mon code HTML <input type="text" class="nativedatepicker"/> je viens d'obtenir une zone de Texte et je suis en mesure de saisir les alphabets trop.
vous devez ajouter l'entrée de l'attribut readonly="readonly" et je l'ai activé par la liaison d'entrée d'événement tactile. Et, en passant, j'ai utiliser cette entrée pour android et je le remplacer sur iOS pour input type="date". Ce n'est pas fiable sur les anciens téléphones android, mais qui fonctionne vraiment bien sur iOS.

InformationsquelleAutor witpok

1

Pourquoi voudriez-vous mettre en œuvre une coutume sélecteur de date si il y a un nent un de disponible ?

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

Pour plus d'infos 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
- maintenant, je n'ai pas spécifique de la mise en œuvre de la datepicker...Ouais , merci,je peux utiliser cette <input type="date"> aussi na..eh bien, mon principal objectif était d'avoir une réplique de la même façon que dans android.
- Cela ne fonctionne que sur iOS, la question est de tagged Android
InformationsquelleAutor Jan

Vous devez vous connecter pour publier un commentaire.