Récupération date

**Zavonen** · 06/01/2009, 08h33

Bonjour à tous !
Je suis pas à pas le tuto dojo.
Voici un exemple donné avec des boîtes de dialogue comportant des champs date et heure:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<title>Dojo example</title>
<style type="text/css">
  @import "dijit/themes/nihilo/nihilo.css";
</style>
 
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
    dojo.require("dijit.form.Button");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.TimeTextBox");
 
    dojo.addOnLoad(function(){
        formDlg = dijit.byId("formDialog");
        // connect to the button so we display the dialog on click:
        dojo.connect(dijit.byId("buttonThree"), "onClick", formDlg, "show");
    });
 
    function checkData(){
        var data = formDlg.attr('value');
        console.log(data);
        if(data.sdate > data.edate){
            alert("Start date must be before end date");
            return false;
        }else{
            return true;
        }
    }
</script>
<body class="nihilo">
<div dojoType="dijit.Dialog" id="formDialog" title="Form Dialog"
    execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
    <table>
        <tr>
            <td><label for="name">Name: </label></td>
            <td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="loc">Location: </label></td>
            <td><input dojoType=dijit.form.TextBox type="text" name="loc" id="loc"></td>
        </tr>
        <tr>
            <td><label for="sdate">Start date: </label></td>
            <td><input dojoType=dijit.form.DateTextBox  name="sdate" id="sdate"></td>
        </tr>
        <tr>
            <td><label for="edate">End date: </label></td>
            <td><input dojoType=dijit.form.DateTextBox  name="edate" id="edate"></td>
        </tr>
        <tr>
            <td><label for="time">Time: </label></td>
            <td><input dojoType=dijit.form.TimeTextBox  name="time" id="time"></td>
        </tr>
        <tr>
            <td><label for="desc">Description: </label></td>
            <td><input dojoType=dijit.form.TextBox type="text" name="desc" id="desc"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button dojoType=dijit.form.Button type="submit"
                    onSubmit="return checkData();">OK</button>
            </td>
        </tr>
    </table>
</div>
 
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" dojoType="dijit.form.Button">Show me!</button>
</body>
</html>

Et bien au retour, les dates et le temps sont toujours vides.
Affichées comme des structures JSON {} et le test de comparaison n'est pas fait, alors que les champs texte "normaux" sont parfaitement renseignés.
Quelqu'un connait-il ce problème ?
Rien trouvé avec Google.

**emmanuel.remy** · 09/01/2009, 18h13

Salut !

Ton problème est lié à Dojo et à la serialization JSON effectuée !

Les composants DateTextBox et TimeTextBox travaillent en interne avec une propriété value de type javascript Date.

Or quand tu appelles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

dojo.toJson(arguments[0], true))

arguments[0] vaut en fait this.getValues(), soit un objet de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
{
  nom_du_champ: valeur_associée,
  ...
}

C'est donc cela que tu serializes via JSON.

Or malheureusement la serialization via JSON serialize les propriétés de l'objet mais ici les objets JS Date (pour rappel les valeurs de propriétés des champs date et time) en sont dépourvus... donc tu obtiens une serialization avec des valeurs vides.

Dojo a prévu cet écueil en cela que si un élément à sérializer dispose d'une fonction "json" (ou "__json__") alors c'est celle-ci qu'il appellera prioritairement.

Une solution simple à ton problème (mais pas parfaite, plutôt sale j'en conviens) est d'ajouter directement au prototype de l'objet Date cette fonction. Cela donnera donc:

//à ajouter par ex après les dojo.require(...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this);};

Le résultat de la serialization est alors le suivant (heure sélectionnée -> 17H30):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
{
  "name":"nom",
  "loc":"Paris",
  "sdate":"2009-01-06T00:00:00+01:00",
  "edate":"2009-01-26T00:00:00+01:00",
  "time":"1970-01-01T17:30:00+01:00",
  "desc":
  "erze"
}

Les controles dates sont inscrits au format ISO, et les heures aussi... mais alors basées sur le 01/01/1970... car elle n'ont pas de "vraie" date associée . Mais tu as ainsi les heures.

Note que si tu as uniquement des dates, tu peux écrire plutôt ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};

ce qui donnera alors des dates au format YYYY-MM-JJ.

Finalement si tu as surtout des dates et exceptionnellement des heures je te conseille de faire un mix des 2 sous cette forme:

1) ajouter pour gérer le bon format des dates:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};

2) dans la div du formDialog inscris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
execute="alert('submitted w/args:\n' + 
                dojo.toJson(dojo.mixin(arguments[0],{ time: dijit.byId('time').attr('displayedValue')}), true)
               );"

dojo.mixin permet de ... mixer 2 objets, ce qu'on fait ici en remplaçant la propriété "time" renvoyée initialement avec la donnée de type Date par le contenu (displayedValue) de la zone
de texte.

Amuse toi bien avec Dojo car globalement c'est un très bon produit qui a beaucoup progressé et dont la philisophie très intéressante est différente de Prototype ou jQuery, même si on retrouve globalement dans le core les mêmes fonctionnalités.

Manu

**Zavonen** · 12/01/2009, 14h29

Merci pour cette réponse très complète.
Je suis actuellement en déplacement. Je vais essayer tout ça en rentrant le 21. Je te tiens au courant.

**Zavonen** · 24/01/2009, 19h01

Je viens d'essayer, c'est OK !
Tout se passe exactement comme tu l'annonces.
Merci, encore pour le temps passé à me répondre.

Récupération date [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager