Dans le même esprit que le tutoriel tinymce j'ai réalisé une intégration du calendrier dhtml de http://www.dynarch.com/projects/calendar(..)

On dézippe dans www/js/jscalendar/

Dans cfunction.jscalendar.php

  /**
	 * cfunction plugin :  init a jscalendar environnement
	 *    
	 * @param jTplCompiler $compiler 
	 */
	function jtpl_cfunction_html_jscalendar($compiler, $params=array()) {
	 
	    // on génère du code php qui sera intégré dans le template compilé
	 
	    $codesource = '$rep = $GLOBALS[\'gJCoord\']->response;
	                   if($rep!=null) {
	                       $rep->addJSLink(\'js/jscalendar/calendar.js\');
	                       $rep->addJSLink(\'js/jscalendar/lang/calendar-fr.js\');
	                       
	                       $rep->addJSCode(\'//jscalendar
	// This function gets called when the end-user clicks on some date.
	function selected(cal, date) {
	  cal.sel.value = date; // just update the date in the input field.
	  if (cal.dateClicked)
	  cal.callCloseHandler();
	    // if we add this call we close the calendar on single-click.
	    // just to exemplify both cases, we are using this only for the 1st
	    // and the 3rd field, while 2nd and 4th will still require double-click.
	
	
	}
	
	// And this gets called when the end-user clicks on the _selected_ date,
	// or clicks on the "Close" button.  It just hides the calendar without
	// destroying it.
	function closeHandler(cal) {
	
	  cal.hide();                        // hide the calendar
	//  cal.destroy();
	  _dynarch_popupCalendar = null;
	}
	
	// This function shows the calendar under the element having the given id.
	// It takes care of catching "mousedown" signals on document and hiding the
	// calendar if the click was outside.
	function showCalendar(id, format, showsTime, showsOtherMonths) {
	  var el = document.getElementById(id);
	  if (_dynarch_popupCalendar != null) {
	    // we already have some calendar created
	    _dynarch_popupCalendar.hide();                 // so we hide it first.
	  } else {
	    // first-time call, create the calendar.
	    var cal = new Calendar(1, null, selected, closeHandler);
	    // uncomment the following line to hide the week numbers
	    // cal.weekNumbers = false;
	    if (typeof showsTime == "string") {
	      cal.showsTime = true;
	      cal.time24 = (showsTime == "24");
	    }
	    if (showsOtherMonths) {
	      cal.showsOtherMonths = true;
	    }
	    _dynarch_popupCalendar = cal;                  // remember it in the global var
	    cal.setRange(1900, 2070);        // min/max year allowed.
	    cal.create();
	  }
	  _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
	  _dynarch_popupCalendar.parseDate(el.value);      // try to parse the text in field
	
	  _dynarch_popupCalendar.sel = el;                 // inform it what input field we use
	
	  // the reference element that we pass to showAtElement is the button that
	  // triggers the calendar.  In this example we align the calendar bottom-right
	  // to the button.
	  _dynarch_popupCalendar.showAtElement(el.nextSibling, "Br");        // show the calendar
	
	  return false;
	}
	
	//fin jscalendar
	
	                       \');
	                    } ';
	 
	    $compiler->addMetaContent($codesource);
	}

On déclare la fonction dans le template, on doit également déclarer le css du skin choisi (plusieurs disponibles) l'appel du date picker se fait après le code html du champ, appel de la fonction javascript showCalendar avec en paramètre 1 l'id du champ et le format en paramètre 2, le format doit correspondre au fichier de langue appelé ici calendar-fr.js dans cfunction.jscalendar.php.

	{jscalendar}
	{meta_html css 'js/jscalendar/calendar-blue.css'}
	 
	<form action="{formurl 'essai~default:index'}" method="POST">
	{formurlparam 'essai~default:index'}
	<div>
	    
	    <input type = "text" name="ma_date" id="ma_date" size="10" maxlength ="12">{$madate|eschtml}</text>
	    <a href=# onClick="return showCalendar('ma_date', '%d/%m/%Y');"><img src=js/jscalendar/img.gif align=ABSMIDDLE alt = "Selectionnez une date" width=18 height=16 border=0></a>
	    <br/><br/>
	    <input type = "submit" value="Valider" />
	</div>  
	</form>

$madate doit être assignée au niveau du controleur

Dans la function javascript closeHandler on peut placer des appels à des fonctions callback notamment des fonctions ajax. exemple :

    if (cal.dateClicked && (cal.sel.id == "ma_date")) ajax_date('ma_date');

Une fonction ajax qui postera la date vers un script php.

Je débute en Jelix c'est surement un peu rustique mais ça fonctionne en attendant une fonction au niveau de jforms.

Pour jForms en effet il est prévu de faire quelque chose mais on ne sait pas encore quelle lib js utiliser pour afficher le datepicker. On va voir selon ce que l'on choisira pour tout ce qui est ajax/dhtml (genre jquery, mootools ou autre). Donc peut être qu'on reprendra ton code ou pas..

Merci en tout cas pour cet exemple de code, et merci aussi pour le lien vers cette lib js.

Par contre une chose : tout ce que tu met dans le addJsCode, peut être faudrait-il le mettre dans un fichier à part vu que ça à l'air complètement statique ? Ça permettrait d'avoir déjà une page html moins lourde, et puis surtout, si on affiche plusieurs calendrier dans une même page, ça éviterait la redéfinition des fonctions JS de ce bout de code, et donc d'erreurs javascript.