Ajouter l'add-on timepicker au datepicker jquery dans editablegrid.js

Version imprimable

03/07/2013, 00h00
zazze69

Ajouter l'add-on timepicker au datepicker jquery dans editablegrid.js

Bonjour à tous,

J'aurais besoin d'une aide pour l'intégration de timepicker dans un tableau réalisé avec Editablegrid.

En fait le code Editablegrid détecte si le datatype d'une colonne est "date" et lui attribue automatiquement le datepicker de jquery.

Voici le code js:
fichier trop long alors je poste un lien vers le fichier js ici

Mais si je ne sais pas comment faire pour qu'une de mes colonnes comportant un datepicker ait aussi l' add-on timepicker.

j'ai essayé beaucoup de chose et le résultat est....nul :cry:
J'ai demandé de l'aide sur github à l'auteur de Editablegrid, qui pour des raisons compréhensibles, ne peut me venir en aide faute de temps.

Mais il a quand même essayé de me mettre sur la voie :

Citation:

Le plus simple est de créer un nouveau CellEditor (en s'inspirant de DateCellEditor) et de l'utiliser pour l'édition de la colonne qui doit utiliser un timepicker.

Ensuite, il faut l'utiliser pour la colonne spécifiée : grid.setCellEditor("datetime_column", new DateTimeCellEditor() );

Mais je n'ai pas réussi.
Par avance je remercie quiconque voudras se pencher sur mon problème car je ne maitrise pas du tout javascript.

Bonsoir,

Bon ben j'ai essayé ça:

ajouté dans etitablegrid.js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function DateTimeCellEditor(a) { this.init(a) } DateTimeCellEditor.prototype = new TextCellEditor(); DateTimeCellEditor.prototype.displayEditor = function (a, b) { TextCellEditor.prototype.displayEditor.call(this, a, b); $(b).datetimepicker({ dateFormat: this.editablegrid.dateFormat == "EU" ? "dd/mm/yy" : "mm/dd/yy", beforeShow: function () { this.onblur_backup = this.onblur; this.onblur = null }, onClose: function (c) { if (c != "") { this.celleditor.applyEditing(b.element, c) } else { if (this.onblur_backup != null) { this.onblur_backup() } } } }).datetimepicker("show") };
ET

Code:

a.cellRenderer = a.enumProvider ? new EnumCellRenderer() : a.datatype == "integer" || a.datatype == "double" ? new NumberCellRenderer() : a.datatype == "boolean" ? new CheckboxCellRenderer() : a.datatype == "email" ? new EmailCellRenderer() : a.datatype == "website" || a.datatype == "url" ? new WebsiteCellRenderer() : a.datatype == "datetime" ? new DateTimeCellEditor() : new CellRenderer();

Dans mon fichier php j'ai mis :

Code:

$grid->addColumn('Date_instal', 'Installation', 'datetime');

et dans mon html j'ai:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="javascript/jquery-ui-timepicker-addon.js"></script> <script src="javascript/editablegrid.js"></script> </head> <body> <script src="javascript/demo.js" ></script> <script type="text/javascript"> window.onload = function() { editableGrid.onloadXML("datasource/status_admin.php?id_status=<?php echo $id_status; ?>"); }; </script>
Mais ça ne fonctionne pas, dans la console firebug j'ai une erreur:

Citation:

TypeError: columns[j].cellRenderer._render is not a function
[Stopper sur une erreur]

columns[j].cellRenderer._render(i, j, td, getValueAt(i, j))

Mais en ait je me demande si seulement cela est possible car dans la notice de timepicker il faut ajouter ceci:

Code:

$('#basic_example_1').datetimepicker();

Ce qui insinue que le script est lié à l'id de mon input. Or je ne sais pas comment nommé l'id de l'input puisque c'est un tableau dont les cellules se transforme en input au clic???
Bref, si quelqu'un pouvait me venir en aide parceque là ça devient vraiment trop gros pour moi...

Mille merci

05/07/2013, 12h29
BaBeuH

Salut,

Je n'ai pas plongé profondément dans le code, mais ta piste semble correcte, je pense que le problème est que tu dois définir un "CellEditor", ce que tu as fait en créant ton DateTimeCellEditor, mais tu dois également définir un "CellRenderer".

Je pense que tu as fait une erreur dans la ligne suivante que tu as modifiée :

Code:

a.cellRenderer = a.enumProvider ? new EnumCellRenderer() : a.datatype == "integer" || a.datatype == "double" ? new NumberCellRenderer() : a.datatype == "boolean" ? new CheckboxCellRenderer() : a.datatype == "email" ? new EmailCellRenderer() : a.datatype == "website" || a.datatype == "url" ? new WebsiteCellRenderer() : a.datatype == "datetime" ? new DateTimeCellEditor() : new CellRenderer();

Tu affectes au renderer un DateTimeCellEditor, qui ne possède pas de fonction render, d'où l'erreur que tu obtiens.

Idéalement, il faut que tu définisses un DateTimeCellRenderer, et que tu l'affectes correctement dans la ligne précédente.

A+

Bonjour,

Merci pour la réponse !

j'ai ajouter ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function DateTimeCellRenderer(a) { this.init(a) } DateTimeCellRenderer.prototype = new CellRenderer; DateTimeCellRenderer.prototype.render = function (a, c) { var b = this.editablegrid.checkDate(c); if (typeof b == "object") { a.innerHTML = b.formattedDate } else { a.innerHTML = c } };
Je n'ai plus l'erreur mais ça ne fonctionne pas plus. Quand je clique dans la cellule, c'est comme si c'était un input simple, je n'ai même pas le datepicker.

Merci.