2010-05-19 3 views
1

J'ai besoin de créer un widget Dojo qui permet aux utilisateurs de spécifier la date & fois. J'ai trouvé un exemple d'implémentation attaché à une entrée dans le tracker de bug de Dojo. Cela semble joli et fonctionne surtout, mais quand je soumets le formulaire, la valeur envoyée par le client n'est pas la valeur choisie par l'utilisateur mais la valeur envoyée par le serveur.Mon widget Dijit DateTimeCombo n'envoie pas la valeur sélectionnée sur la soumission de formulaire

Quels changements dois-je effectuer pour que le widget soumette la date valeur &?

utilisation de l'échantillon est de rendre une page JSP avec des balises HTML de base (forme d'entrée &), puis dojo.addOnLoad une fonction qui sélectionne les éléments de base par ID, ajoute dojoType attribut, et dojo.parser.parse() - es la page.

Merci d'avance.

Le widget est implémenté dans deux fichiers. L'application utilise Dojo 1.3.

Fichier 1: DateTimeCombo.js

dojo.provide("dojox.form.DateTimeCombo"); 

dojo.require("dojox.form._DateTimeCombo"); 
dojo.require("dijit.form._DateTimeTextBox"); 

dojo.declare(
    "dojox.form.DateTimeCombo", 
    dijit.form._DateTimeTextBox, 
    { 
     baseClass: "dojoxformDateTimeCombo dijitTextBox", 
     popupClass: "dojox.form._DateTimeCombo", 
     pickerPostOpen: "pickerPostOpen_fn",   
     _selector: 'date',  
     constructor: function (argv) {}, 

     postMixInProperties: function() 
     {    
      dojo.mixin(this.constraints, { 
       /* 
       datePattern: 'MM/dd/yyyy HH:mm:ss', 
       timePattern: 'HH:mm:ss', 
       */ 
       datePattern: 'MM/dd/yyyy HH:mm', 
       timePattern: 'HH:mm', 

       clickableIncrement:'T00:15:00', 
       visibleIncrement:'T00:15:00', 
       visibleRange:'T01:00:00' 
      }); 
      this.inherited(arguments); 
     }, 

    _open: function() 
    { 
     this.inherited(arguments); 
     if (this._picker!==null && (this.pickerPostOpen!==null && this.pickerPostOpen!=="")) 
     { 
      if (this._picker.pickerPostOpen_fn!==null) 
      { 
       this._picker.pickerPostOpen_fn(this); 
      } 
     } 
    }  

    } 
); 

Fichier 2: _DateTimeCombo.js

dojo.provide("dojox.form._DateTimeCombo"); 

dojo.require("dojo.date.stamp"); 
dojo.require("dijit._Widget"); 
dojo.require("dijit._Templated"); 
dojo.require("dijit._Calendar"); 
dojo.require("dijit.form.TimeTextBox"); 
dojo.require("dijit.form.Button"); 

dojo.declare("dojox.form._DateTimeCombo", 
    [dijit._Widget, dijit._Templated], 
{ 

    // invoked only if time picker is empty 
    defaultTime: function() { 
     var res= new Date(); 
     res.setHours(0,0,0); 
     return res; 
    }, 

    // id of this table below is the same as this.id 
    templateString: 
    " <table class=\"dojoxDateTimeCombo\" waiRole=\"presentation\">\ 
     <tr class=\"dojoxTDComboCalendarContainer\">\ 
     <td>\ 
      <center><input dojoAttachPoint=\"calendar\" dojoType=\"dijit._Calendar\"></input></center>\ 
     </td>\ 
     </tr>\ 
     <tr class=\"dojoxTDComboTimeTextBoxContainer\">\ 
     <td>\ 
      <center><input dojoAttachPoint=\"timePicker\" dojoType=\"dijit.form.TimeTextBox\"></input></center>\ 
     </td>\ 
     </tr>\ 
     <tr><td><center><button dojoAttachPoint=\"ctButton\" dojoType=\"dijit.form.Button\">Ok</button></center></td></tr>\ 
     </table>\ 
    ", 

    widgetsInTemplate: true, 

    constructor: function(arg) {}, 

    postMixInProperties: function() {  
     this.inherited(arguments);  
    }, 

    postCreate: function() { 
     this.inherited(arguments); 
     this.connect(this.ctButton, "onClick", "_onValueSelected"); 
    }, 

    // initialize pickers to calendar value 
    pickerPostOpen_fn: function (parent_inst) { 
     var parent_value = parent_inst.attr('value'); 
     if (parent_value !== null) { 
      this.setValue(parent_value); 
     } 
    }, 

    // expects a valid date object 
    setValue: function(value) { 
     if (value!==null) { 
      this.calendar.attr('value', value); 
      this.timePicker.attr('value', value); 
     }  
    }, 

    // return a Date constructed date in calendar & time in time picker. 
    getValue: function() { 
     var value = this.calendar.attr('value'); 
     var result=value;  
     if (this.timePicker.value !== null) { 
      if ((this.timePicker.value instanceof Date) === true) { 
       result.setHours(this.timePicker.value.getHours(), 
       this.timePicker.value.getMinutes(), 
       this.timePicker.value.getSeconds()); 
       return result; 
      } 
     } else { 
      var defTime=this.defaultTime(); 
      result.setHours(defTime.getHours(), 
       defTime.getMinutes(), 
       defTime.getSeconds()); 
      return result;     
     } 
    }, 

    _onValueSelected: function() { 
     var value = this.getValue(); 
     this.onValueSelected(value); 
    }, 

    onValueSelected: function(value) {} 

}); 

Répondre

0

On dirait que vous voulez utiliser getValue. La convention est maintenant d'utiliser _getValueAttr, puis d'appeler attr ("value") mais je pense que cela a commencé dans Dojo 1.4 et que ce code devrait être porté pour utiliser ces nouveaux patterns.

Noe cette valeur doit être un objet Date JavaScript qui serait mieux envoyé au serveur en utilisant dojo.date.stamp.toISOString()

0

Cela a commencé à travailler bien après j'ai ajouté une méthode « serialize » à DateTimeCombo .js qui construit exactement le format de sortie que je veux.

Cela me semble étrange, car il existe déjà une implémentation de sérialisation dans _DateTimeTextBox.js qui devrait générer la valeur au format ISO requis.

Questions connexes