Statistiques

Compteur d'affichages des articles
1006538

01 - Préambule

J'ai eu besoin, dans la partie administration d'un site, d'utiliser des champs pour saisir le début et la fin d'un évènement avec comme information la date et l'heure.

Dans Joomla nous n'avons la possibilité de gérer que les dates avec un champ calendar.

J'ai donc cherché un contournement et jQuery est apparu comme une évidence.

02 - Addon jQuery DateTimePicker

Après des recherches sur internet pour utiliser un Addon permettant de choisir une date et une heure dans la même manipulation, je suis tombé sur ce site : http://trentrichardson.com/examples/timepicker/.

J'ai téléchargé l'addon : http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js et le css correspondant : http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css.

 

J'ai copié le fichier jquery-ui-timepicker-addon.js dans le répertoire média de mon composant :/media/com_prestaswags/js.

J'ai copié le fichier jquery-ui-timepicker-addon.css dans le répertoire média de mon composant : /media/com_prestaswags/css.

03 - Modification du template d'administration

Il faut modifier le template d'administration pour insérer jQuery pour la totalité de la partie administration.

Dans mon exemple, c'est le template bluestork.

Le fichier est donc : /administrator/templates/bluestork/index.php.

J'ai donc ajouté juste après la balise <head> les ligne suivantes :

<link rel="stylesheet" media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" ></script>

De cette manière nous injectons jQuery dans toute la partie administration. Cela nous permettra d'utiliser d'autres addons dans notre composant.

04 - Modification de la vue

Le premier fichier à modifier est : administrator/components/com_prestaswags/views/prestaswag/tmpl/edit.php.

Il faut ajouter au début du fichier les lignes suivantes :

$document->addStyleSheet(JURI::root().'media/com_prestaswags/css/jquery-ui-timepicker-addon.css');
$document->addScript(JURI::root().'media/com_prestaswags/js/jquery-ui-timepicker-addon.js');

Comme la zone de saisie date+heure est dans un slider, il faut modifier celui-ci. Dans mon exemple : administrator/components/com_prestaswags/views/prestaswag/tmpl/edit_dataswag.php.

Les lignes suivantes :

        <li><?php echo $this->form->getLabel('date_start'); ?>
        <?php echo $this->form->getInput('date_start'); ?></li>

deviennent

        <li><?php echo $this->form->getLabel('date_start'); ?>
		<input type="text" name="date_start" id="date_start" value="<?php echo $this->item->date_start;?>"></li>

Puis il faut ajouter la fonction jQuery :

 <script type="text/javascript">  
$(function() {  
    $('#date_start').datetimepicker({  
        duration: '',  
        showTime: true,  
        constrainInput: true,
		dateFormat: "yy-mm-dd",	
		timeformat: "hh:mm:ss",
     });  
});  
</script>  

Le champ date_start est défini comme ceci dans le fichier : administrator/components/com_prestaswags/models/forms/prestaswag.xml.

            <field
                name="date_start"
                type="calendar"
		label="COM_PRESTASWAGS_FIELD_DATASWAG_DATESTART_LABEL"
                description="COM_PRESTASWAGS_FIELD_DATASWAG_DATESTART_DESC"
                extension="com_prestaswags"
                view="prestaswag"
            />

05 - Modification de la fonction save

Comme nous n'utilisons pas le fonctionnement standard de Joomla, nous devons modifier la fonction save pour prendre en compte l'utilisation de jQuery.

Cela se passe dans le fichier : administrator/components/com_prestaswags/models/prestaswag.php.

La fonction save :

	public function save($data)
	{
// Alter the title for save as copy
		if (JRequest::getVar('task') == 'save2copy') {
			list($title,$alias) = $this->generateNewTitle($data['catid'], $data['alias'], $data['title']);
			$data['title']	= $title;
			$data['alias']	= $alias;
		}

		if (parent::save($data)) {
			return true;
		}

		return false;
	}

devient

	public function save($data)
	{
		$jinput = JFactory::getApplication()->input;
		$data[date_start]=$jinput->get('date_start', '', '');
// Alter the title for save as copy
		if (JRequest::getVar('task') == 'save2copy') {
			list($title,$alias) = $this->generateNewTitle($data['catid'], $data['alias'], $data['title']);
			$data['title']	= $title;
			$data['alias']	= $alias;
		}

		if (parent::save($data)) {
			return true;
		}

		return false;
	}

Explication : $jinput = JFactory::getApplication()->input;

Cette ligne récupère les données du formulaire.

Explication : $data[date_start]=$jinput->get('date_start', '', '');

Cette ligne défini la variable $data[date_start] avec la valeur saisie dans le formulaire.

06 - Conclusion

Voila ce que donne en situation:

Et voila!

 

Ceci m'a permis de comprendre comment insérer jQuery dans la partie administration de mes composants.