Ticket #196 (assigned task)

Opened 1 year ago

Last modified 1 day ago

jforms: ajout d'un datepicker pour la saisie des dates/times

Reported by: laurentj Assigned to: Julien (accepted)
Priority: high Milestone: Jelix 1.1 beta 1
Component: jelix:forms Version: 1.0 beta2
Severity: normal Keywords:
Cc: Php version:
Review: Hosting Provider:
Documentation needed: 0 Blocking:

Description

Ajouter un script DHTML pour afficher un datepicker sur les input type="date/datetime/time"

Change History

08/08/07 15:57:02 changed by laurentj

  • priority changed from normal to low.
  • milestone changed from Jelix 1.0beta3 to Jelix 1.0.

08/27/07 16:20:28 changed by laurentj

  • blocking deleted.

09/05/07 12:27:28 changed by laurentj

  • milestone changed from Jelix 1.0 to Jelix 1.1.

09/05/07 12:30:07 changed by laurentj

  • priority changed from low to high.

04/22/08 09:46:50 changed by webseb

  • review changed.
  • docneeded changed.

Bonjour,

Je ne sais pas si il est prevu d'intégrer un datepicker jQuery, mais pour info jQuery à un datepicker officiel : UI datepicker

Doc : http://marcgrabanski.com/code/ui-datepicker/

Infos : http://plugins.jquery.com/project/uidatepicker

04/23/08 15:18:35 changed by laurentj

le plugin date_input a déjà été intégré dans la distribution Jelix. Mais il reste encore à faire la "connection" avec jforms.

06/21/08 18:49:42 changed by Julien

  • owner set to Julien.
  • status changed from new to assigned.

Je vais en avoir besoin pour un projet semaine prochaine, donc je prends...

07/24/08 18:15:19 changed by Julien

hello,

j'ai pas eu trop le temps en fait jusqu'à maintenant, mais avant que je commence, question : vaudrait pas mieux utiliser le composant officiel de jQuery-UI ?

Merci

07/25/08 10:40:55 changed by laurentj

Je ne sais pas. J'imagine que vouloir utiliser ce composant officiel, signifie charger plus de fichier js que le date_input, non ?

07/25/08 11:22:08 changed by Julien

Il faut effectivement charger le UI core (8Ko non compressé, 5 en minified et 3,5 en packed) en plus.

mais comme le ui.core est utilisé à la base de plein d'autres trucs, c'est peut-être un "investissement rentable".

Pour le composant en lui-même, le fichier est un peu plus lourd (environ 15ko de diff), mais il semble aussi y avoir bcp plus de fonctionnalités (séléction de plages au sein du même calendrier, restrictions sur les choix possibles : pas de choix d'année, juste sélection dans un mois donné, etc, ...) et de possibilités de personnalisation.

Je pense que ça peut valoir le coup d'utiliser un truc un peu + lourd pour avoir toutes les possibilités, et comme dit, le UI Core est la base pour d'autres composants qu'on voudra peut-être intégrer un jour.

07/25/08 11:46:58 changed by laurentj

j'hesite quand même. Surtout avec le system de builder que l'on a maintenant dans jelix. Si on veut des formulaires avec des trucs "hype" dans tout les sens, rien n'empêche de faire un builder "htmljquery", utilisant ui et cie. Tu va me dire qu'on utilise aussi jquery dans le builder html, mais c'est juste pour le datepicker (bientôt) et l'éditeur html... faut voir...

ou alors le builder html par défaut, c'est avec tout les trucs. Mais il serait interressant d'avoir un builder "light" pour ceux qui ne veulent pas des pages lourdes.

07/25/08 12:15:23 changed by Julien

yup bien compris

de mon point de vue, utiliser jqueryUI (que je ne connais pas, j'ai juste vu que c'était le truc officiel pour les composants d'interface) est peut-être plus pérenne, dans le sens où c'est lié étroitement à jQuery, donc les mises à jour sont a priori synchro, etc...

Charger le coeur UICore ne servira pour l'instant que pour le datepicker c'est vrai, mais comme il est à la base de plein d'autres effets qu'on pourrait vouloir intégrer à divers endroits (je pense à des trucs rigolos comme ici ou pour un mediamanager dans jCMS ;)

Bien sûr le développeur pourrait lui-même rajouter ce dont il a besoin, voir utiliser une autre lib. Mais si déjà on se dit qu'on intègre jquery à la base, autant utiliser les composants de jqueryUI pour les trucs intégrés dans Jelix afin d'avoir un ensemble homogène.

Sans doute que ça facilitera les mises à jour aussi.

07/25/08 22:52:17 changed by bastnic

Julien, je suis parfaitement d'accord avec le principe.

Là pour deux projets j'envisage de passer à http://extjs.com/products/gxt/ . Faut que je teste.

08/18/08 11:25:46 changed by AdrienC

Bonjour, je propose mon hack du builder html de jforms pour utiliser le datepicker deja present (jquery/date_input) :

jelix/plugins/jforms/html/html.jformsbuilder.php : dans public function outputMetaContent($t), rajouter :

        $resp->addJSLink($www.'jquery/jquery.js');
        $resp->addJSLink($www.'jquery/date_input/jquery.date_input.min.js');
        $resp->addJSLink($www.'jquery/date_input/jquery.date_input.format.js');
        $resp->addJSLink($www.'jquery/date_input/jquery.date_input.'.$GLOBALS['gJConfig']->locale.'.js');
        $resp->addCSSLink($www.'jquery/date_input/date_input.css');
        $resp->addJSCode('$($.date_input.initialize);');

dans public function outputControl($ctrl), rajouter :

        $class.= ($ctrl->datatype instanceof jDatatypeDate?' date_input':'');

jquery.date_input.format.js : rajouter ce fichier dans jquery/date_picker

jQuery.extend(DateInput.DEFAULT_OPTS, {
  stringToDate: function(string) {
    var matches;
    if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
      return new Date(matches[1], matches[2] - 1, matches[3]);
    } else {
      return null;
    };
  },

  dateToString: function(date) {
    var month = (date.getMonth() + 1).toString();
    var dom = date.getDate().toString();
    if (month.length == 1) month = "0" + month;
    if (dom.length == 1) dom = "0" + dom;
    return date.getFullYear() + "-" + month + "-" + dom;
  }
});

(C'est les fonctions de demonstration de formattage des dates dispo ici : http://jonathanleighton.com/projects/date-input)

Il y a surement une facon plus propre de faire ... Et ce datepicker est un peu just, il convient pour choisir une date proche de l'actuelle, mais pour choisir une date de naissance, il faudrait cliquer beaucoup trop de fois pour choisir l'annee ... celui de jquery ui serait une bonne alternative je pense ..

08/18/08 12:39:05 changed by AdrienC

.. et le hack pour utiliser jquery ui datepicker :

telecharger jquery ui avec le core et le datepicker ici : http://ui.jquery.com/download_builder/

le dezipper dans jquery/ui_datepicker

y placer egalement http://jquery-ui.googlecode.com/svn/trunk/themes/default/ui.datepicker.css et http://ui.jquery.com/repository/demos_templates/images/calendar.gif

dans jelix/plugins/jforms/html/html.jformsbuilder.php dans public function outputMetaContent($t), rajouter :

        $resp->addJSLink($www.'jquery/jquery.js');
        $resp->addJSLink($www.'jquery/ui_datepicker/jquery-ui-personalized-1.6b.min.js');
        $shortLocale = substr($GLOBALS['gJConfig']->locale, 0, 2);
        $resp->addJSLink($www.'jquery/ui_datepicker/i18n/ui.datepicker-'.$shortLocale.'.js');
        $resp->addJSCode('$(document).ready(function(){
                $(".datepicker").datepicker({
                        dateFormat: "yy-mm-dd",
                        showOn: "both",
                        buttonImage: "'.$www.'jquery/ui_datepicker/calendar.gif",
                        buttonImageOnly: true
                });
        });');
        $resp->addCSSLink($www.'jquery/ui_datepicker/ui.datepicker.css');

et dans public function outputControl($ctrl), rajouter :

        $class.= ($ctrl->datatype instanceof jDatatypeDate?' datepicker':'');
Download in other formats: Comma-delimited Text Tab-delimited Text RSS Feed