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

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

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

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

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

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

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.

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.

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 là 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.

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.

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 ..

.. 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':'');