Discussion :

[pierrot10]

Bo njour à tous,

Quand je crée un formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php 
	echo $this->Form->create('Post',array('class'=>'navbar-form'));
	echo '<div class="form-group">';
 	echo $this->Form->input('id');
 	echo $this->Form->input('type',array('value'=>'page','type'=>'hidden'));
 	echo $this->Form->input('name', array('label'=>'Name','class'=>'form-control'));
 	echo $this->Form->input('menutitle', array('label'=>'Menu title','class'=>'form-control'));
 	echo $this->Form->input('showmenu', array('label'=>' Show in the menu'));
 	echo $this->Form->input('pagetitle', array('label'=>'Title of page','class'=>'form-control'));
 	echo $this->Form->input('slug', array('label'=>'Slug','class'=>'form-control'));
 	echo $this->Form->input('content', array('label'=>'Content','class'=>'form-control'));
 
 	echo $this->Form->input('created', array('label'=>'Creation time','class'=>'form-control','dateFormat'=>'DMY','timeFormat'=>'24'));
 	echo $this->Form->input('parentid', array('label'=>'Parent ID','class'=>'form-control'));
 	echo $this->Form->input('online',array('label'=>"Online ?",'type'=>'checkbox'));
 	echo $this->Form->input('order', array('label'=>'Order','class'=>'form-control'));
 	echo '</div>';
	echo $this->Form->end('Envoyer'); 
?>

J'ai un champs date

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo $this->Form->input('created', array('label'=>'Creation time','class'=>'form-control','dateFormat'=>'DMY','timeFormat'=>'24'));

Le truc c'est que sur ma page web j'ai un menu déroulant pour l'année, le mois, le jour, l'heure .... .

J'aimerais savoir comment je peux modifier cette apparence pour avoir un champs de type exte afin de mettre en place un system date picker de jQueryUI.

Je vous remercie

[Spartacusply]

Hello !

Si tu souhaites vraiment faire ceci, je pense qu'il va être compliqué d'utiliser le helper "Form" de Cake, rien que pour la validation de la date qui va devenir compliquée et pour plein d'autres raisons.

Ce que je fais et ce que je peux te conseiller de faire à l'occasion, ce n'est pas de modifier le fonctionnement des dates dans Cake mais plutôt de modifier le comportement du datepicker pour que celui-ci s'adapte au fonctionnement de Cake (3 listes déroulantes et non un champ texte).

Je créer en fait un champ input hidden sur lequel sera appliquée le datepicker et à la sélection d'une date je modifie les valeurs des listes déroulantes.

Pour t'aider, voici le code que j'utilise :

Dans le helper "Form" (ou dans un autre helper) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
    public function inputDatepicker($name, $options = array()) {
        $options['label'] = false;
 
        return $this->inputs(
                        array(
                            $name => $options,
                            'hidden_calendar' => array('type' => 'hidden', 'class' => 'datepicker'),
                            'legend' => false
                        )
        );
    }

Dans ma vue, ultra simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo $this->Form->inputDatepicker('namedelinput');

Et le js pour modifier le comportement du datepicker :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    function zeroLead(num) {
	return (2 - (num.toString().length) >= 0) ? (num.toFixed(2 - (num.toString().length)).toString().split('.').reverse().join('')) : num;
    }
 
    $(".datepicker").datepicker({
	showOn: "button",
	buttonImage: "/img/calendrier.png",
	buttonImageOnly: true,
	minDate: "-12M",
	maxDate: "+12M -1d",
	numberOfMonths: 2,
	onSelect: function(e, o) {
	    if ($(this).parent().find('[name*="day"]').attr('disabled') !== 'disabled') {
		var day = zeroLead(parseInt(o.selectedDay));
		var month = zeroLead(parseInt(o.selectedMonth + 1));
		var year = zeroLead(parseInt(o.selectedYear));
 
		$(this).parent().find('[name*="day"]').val(day);
		$(this).parent().find('[name*="month"]').val(month);
		$(this).parent().find('[name*="year"]').val(year);
	    }
	}
    });