[dev] how to use a date picker in date fields of horde forms?
Kurt Sager (SWS)
ksager at sws.ch
Fri Jun 15 12:51:06 UTC 2007
hello,
I have to improve an existing php-website (not a mail application) which
have been developped by a programmer not availbale at this time.
The *website was developped using php/PEAR/Horde*.
(see http://courses.cas-moleson.ch)
I understand the general application logic, however I'm not at all
familiar with the horde framework ...
(BTW: is there a good introduction or study text to horde available? I
couldn't find one using google ...)
*
*
1. *The task:*
We want to complete all date entry form fields by a date picker
(showings days, weeks, months, all dates in european format dd.mm.yyyy).
The website concerned is
http://courses.cas-carouge.ch (sorry, exists in french only ...)
2. *Part solution:*
A few pages on the site are realized by a mix of php code and html
templates containing tags.
In such pages I could easily incorporate the datepicker found on
http://dali.mty.itesm.mx/~hugo/js/datepickercontrol/
into the html templates used by the php/horde coding.
As an example, access this URL:
http://courses.cas-carouge.ch/search.php?date_from=12.06.2007
(see the relevant html template at the end of this message)
In this case the datepicker works as expected.
3. *Our problem:*
However most other pages (all in the member zone) of the website use a
different approach of generating input forms (may be more typical for
horde applications?) by
using a $form variable which is "rendered" later in the code.
Like this:
.....
$*
*$title = ($editing) ? 'Modifier une proposition de course' : 'Proposer
une nouvelle course';
$form->setTitle($title);
/* Set up the form. */
$form->setButtons(array('OK', 'Annuler'), true);
$form->addHidden('', 'proposal_id', 'int', false);
*$form->addVariable('Date de début', 'proposal_date_start', 'date',
false, false, '', array('%d.%m.%y'));
$form->addVariable('Date de fin', 'proposal_date_end', 'date', false, false,
* * 'Tu peux laisser ce champ vide pour une course
d\'un seul jour.', array('%d.%m.%y'));*
$var = &$form->addVariable('Type', 'proposal_type_id', 'enum', true,
false, '', array($types_list, true));
$action = &Horde_Form_Action::singleton('reload');
$var->setAction($action);
if ($vars->get('proposal_type_id') != '') {
$form->addVariable('Difficulté', 'proposal_rating_id', 'enum',
false, false, '', array($ratings_list, true));
}
$form->addVariable('Public cible', 'proposal_target_id', 'enum', true,
false, '', array($targets_list, true));*
*.....
.......
/* Render the form. */
require_once 'Horde/Form/Renderer.php';
$renderer = &new Horde_Form_Renderer();
if (is_a($renderer, 'PEAR_Error')) die('error');
$main = Util::bufferOutput(array($form, 'renderActive'), $renderer,
$vars, 'edit.php', 'post');
$template->set('main', $main);
$template->set('notify', Util::bufferOutput(array($notification,
'notify'), array('listeners' => 'status')));
require CASM_TEMPLATES . '/common-header.inc';
echo $template->fetch(CASM_TEMPLATES . '/main/main.html');
require CASM_TEMPLATES . '/common-footer.inc';
?>
We want to show the datepicker popup also in those date input fields.
Is there a special date type (instead of 'date') available for
AddVariable which shows an equivalent datepicker popup?
Where can I find a documentation how it works and how to implement it?
(Based on a tip from Jan Schneider I tried the date type 'monthdayyear'.
This produces an endless CPU bound loop on process php-cgi.exe on the
Win2K3 server, to be aborted ...)
Thanks in advance.
Kurt Sager
Marly / Switzerland
*
Annexe:*
*(see *http://courses.cas-carouge.ch )
<
*HTML template:*
<tag:notify />
<div class="header">
<span style="float:left; width:40%"><tag:title /></span>
<span style="float:right; width:60%; text-align:
right"><tag:num_courses /></span>
<div class="clear"> </div>
</div>
<if:is_auth>
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr>
<td class="item"><a href="<tag:actions.back_url
/>"><tag:actions.back_text /></a></td>
<td class="item" align="right"><tag:images.listing /> <a
href="<tag:actions.listing_url />"
target="_blank"><tag:actions.listing_text /></a></td>
<td class="item" align="right"><tag:images.booklet /> <a
href="<tag:actions.booklet_url />"
target="_blank"><tag:actions.booklet_text /></a></td>
</tr>
</table>
</if:is_auth>
<form action="<tag:actions.target_url />" method="get">
<!-- datepicker parameters French -->
<input type="hidden" id="DPC_TODAY_TEXT" value="aujourd'hui">
<input type="hidden" id="DPC_BUTTON_TITLE" value="Ouvrir calendrier...">
<input type="hidden" id="DPC_MONTH_NAMES" value="['Janvier', 'Février',
'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre',
'Octobre', 'Novembre', 'Décembre']">
<input type="hidden" id="DPC_DAY_NAMES" value="['Dim', 'Lun', 'Mar',
'Mer', 'Jeu', 'Ven', 'Sam']">
<input type="hidden" id="DPC_DEFAULT_FORMAT" value="DD.MM.YYYY">
<input type="hidden" id="DPC_FIRST_WEEK_DAY" value="1">
<input type="hidden" id="DPC_BUTTON_POSITION" value="in">
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr>
<td class="item">
<tag:actions.course_text />
<input type="text" name="date_from" id="date_from" size="11"
value="<tag:date_from />" datepicker="true" /> -
<input type="text" name="date_to" id="date_to" size="11"
value="<tag:date_to />" datepicker="true" />
<input name="submitbutton" type="submit" value="OK" />
</td>
</tr>
</table>
</form>
<if:courses>
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr>
<if:is_auth>
<th class="item"> </th>
</if:is_auth>
<th class="item"><if:show_inv_sort0><a
href="<tag:actions.inv_sort0_url />"><tag:actions.inv_sort0_img
/></a></if:show_inv_sort0> <a href="<tag:actions.sort0_url />">Date</a></th>
<th class="item"><if:show_inv_sort1><a
href="<tag:actions.inv_sort1_url />"><tag:actions.inv_sort1_img
/></a></if:show_inv_sort1> <a href="<tag:actions.sort1_url />">Type</a></th>
<th class="item">Difficulté / <abbr title="Public
cible">PC</abbr></th>
<th class="item"><if:show_inv_sort2><a
href="<tag:actions.inv_sort2_url />"><tag:actions.inv_sort2_img
/></a></if:show_inv_sort2> <a href="<tag:actions.sort2_url
/>">Δ</a></th>
<th class="item"><if:show_inv_sort3><a
href="<tag:actions.inv_sort3_url />"><tag:actions.inv_sort3_img
/></a></if:show_inv_sort3> <a href="<tag:actions.sort3_url
/>">Durée</a></th>
<th class="item">Description</th>
</tr>
<loop:courses>
<tr>
<if:is_auth>
<td class="item0" valign="top">
<a href="<tag:courses.details_url />"><tag:images.details /></a>
</td>
</if:is_auth>
<td class="item0" valign="top"><tag:courses.course_date_start /></td>
<td class="item0" valign="top" align="center"><tag:courses.type_icon
/></td>
<td class="item0" align="center"
valign="top"><tag:courses.rating_name /><br /><tag:courses.target_name
/></td>
<td class="item0" align="right"
valign="top"><tag:courses.course_gradient /></td>
<td class="item0" align="right"
valign="top"><tag:courses.course_duration /></td>
<td class="item0" valign="top"
width="60%"><tag:courses.course_description /></td>
</tr>
</loop:courses>
</table>
</if:courses>
==========================================================
The header included into the php script includes the date picker java
script:
<?php
if (isset($language)) {
header('Content-type: text/html; charset=iso-8859-1');
header('Vary: Accept-Language');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright 2007, SWS SoftWare Systems AG. -->
<!-- Web Site created by SWS SoftWare Systems AG
(http://www.sws.ch) -->
<!-- This site is based on Horde framework
(http://www.horde.org) -->
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
$page_title = 'Club Alpin Suisse, Section Carougeoise';
if (!empty($title)) $page_title .= ' :: ' . $title;
?>
<title><?php echo $page_title ?></title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="<?php echo CASM_THEMES . '/' . $params['theme'] .
'/screen.css'?>" rel="stylesheet" type="text/css" />
<script language="javascript" src="<?php echo $params['web_root'] .
'/lib/js/footer.js'?>" type="text/javascript"></script>
<script language="javascript" src="<?php echo $params['web_root'] .
'/lib/datepicker/datepickercontrol.js'?>" type="text/javascript"></script>
<link type="text/css" rel="stylesheet"
href="/lib/datepicker/datepickercontrol.css">
</head>
<body>
<div id="header">
<div id="header_text">
<div id="header_logo">
<a href="<?php echo $params['web_root'] . '/index.php'?>"><img
src="<?php echo CASM_THEME_GRAPHICS . '/cas-logo.gif'?>" alt="Club Alpin
Suisse" title="Page d'accueil des courses" border="0" /></a>
</div>
Club Alpin Suisse - Section Carougeoise<br />
<b>Gestion des courses</b><br />
courses.cas-carouge.ch
</div>
</div>
<div id="content">
<div id="menu">
<?php require_once CASM_BASE . '/menu.php'?>
</div>
More information about the dev
mailing list