Date picker jquery et zend form

Version imprimable

30/07/2010, 11h29
cyrux

Date picker jquery et zend form

Bonjour à tous,

Nouvelle question :
J'ai plusieurs date à insérer dans un formulaire et suite à un peu de recherches, je suis tombé sur cette page
http://www.beberlei.de/jquery/demo/index.php

Je trouve le DatePicker très très bien fait et très pratique,
Quelqu'un sait comment je peut le mettre en place dans mes formulaires ?

Il y a bien un peu de code en dessous mais je ne le comprends pas bien.
Faut il que j'ajoute des librairies particulières ??

Pour info : J'utilise le pattern MVC

Merci d'avance !! :merci:

Bonjour,

Oui c'est possible, perso j'utilise le plugin Calendar de Jquery http://jqueryui.com/demos/datepicker/ en direct
ou via ZendX_JQuery
http://framework.zend.com/manual/fr/...uery.view.html

documentation Zend
jQuery UI Form Helpers
datePicker($id, $value, $params, $attribs): Create a DatePicker inside a text field. This widget is available since jQuery UI 1.5 and can therefore currently be used with the Google CDN. Using the 'handles' option to create multiple handles overwrites the default set value and the jQuery parameter 'startValue' internally inside the view helper.

Voilà pour la doc officielle.

Sinon dans le principe ce n'est que tu javascript qui vient en surcouche de ton application. il faut télécharger Jquery et JqueryUI avec un thème de ton choix (code CSS).

Une fois que ton application fait référence à ces librairies, colle le code suivant dans un fichier javascript (ex: custom.js) que tu appelleras également.

Il faut que ton input de ton formulaire est un id = "date"

une configuration du datepicker
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // sur chargement du document DOM termniné (soit notre page HTML) $(document).ready(function() { $("#date").datepicker( { showButtonPanel: true , dateFormat: 'dd/mm/yy' , dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] , dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] , monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Août','Sep','Oct','Nov','Déc'] , monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] , prevText: 'Précédent' , nextText: 'Suivant' , closeText: 'OK' , currentText: "Aujour'dhui" }); }); //EOf:: DOM isReady
Et voilà.

30/07/2010, 14h58
MaitrePylos

Si tu utilises ZendX_Jquery c'est encore plus facile

dans ta vue

Code:

<?php echo $this->datePicker('date_entree', '30-07-2010', array('dateFormat' => 'dd-mm-yy', 'changeMonth' => true, 'changeYear' => true), array()) ?>
02/08/2010, 09h53
cyrux

Merci de vos réponses les Amis !! :ccool:

Petite précision que j'ai omise de préciser la fois dernière => je suis totalement novice en la matière !!!! je pars de 0 !

donc je ne sais comment installer ce beau joujou :(

Suite à vos conseils :
J'ai réalisé mon jQuery UI que j'ai téléchargé.
Dans ce dossier, j'ai 3 sous dossier css / development-bundle / js
Concernant css et js je pense qu'il faut les placer dans public/css et public/js
mais pour le develoment-bundle, a il une nécessité ?? si oui, ou dois-je le placer ?

J'ai téléchargé Jquery Current Release 1.4.2 => Uncompressed et toujours pareil, aucune idée de ou le placer.
Pour être sur de ne pas faire d'erreur, il s'agit bien de lignes de commandes à copier coller ???

autre chose :

Citation:

Une fois que ton application fait référence à ces librairies, colle le code suivant dans un fichier javascript (ex: custom.js) que tu appelleras également.

C'est à dire ?? ou placer cet appel ??

Citation:

Il faut que ton input de ton formulaire est un id = "date"

:koi: j'ai pas tout saisi la ... ?? :oops:

Pourrais on partir d'un exemple c'est à dire voir ce que je doit metre dans mon modèle, ma vue & mon controller ?? histoire d'y voir plus clair ??

:merci:encore !!
02/08/2010, 10h05
cyrux

Citation:

Si tu utilises ZendX_Jquery c'est encore plus facile

C'est la même chose ??
Désolé, je débute, et je dois surement poser des questions idiotes ... :oops:

Va falloir que je fasse un tuto sur ZendX_Jquery

Alors dans ton boostrap tu ajoutes ceci :

Code:

1
2
3
4
5
6
7
8
9
 
    protected  function _initView() {
        // Initialize view
        $view = new Zend_View();
        $view->doctype('XHTML1_STRICT');
        $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8');
        $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');
               return $view;
    }

Le plus important est cette ligne

Code:

1
2
 
$view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');

Le reste du adapte à ton projet

Ensuite dans ton layout

Code:

1
2
3
4
5
6
7
8
9
10
 
 <?php
        $this->jQuery()->enable();
        $this->jQuery()->setLocalPath($this->baseUrl() . '/public/js/jquery-1.4.2.min.js')
                ->setUiLocalPath($this->baseUrl() . '/public/js/jquery-ui-1.8.2.custom.min.js')
                ->addStyleSheet($this->baseUrl() . '/public/css/ui-lightness/jquery-ui-1.8.2.custom.css');
        $this->jQuery()->uiEnable();
 
        echo $this->jQuery();
        ?>

Tu peux éventuellement te passer de

Code:

1
2
3
4
 
  $this->jQuery()->setLocalPath($this->baseUrl() . '/public/js/jquery-1.4.2.min.js')
                ->setUiLocalPath($this->baseUrl() . '/public/js/jquery-ui-1.8.2.custom.min.js')
                ->addStyleSheet($this->baseUrl() . '/public/css/ui-lightness/jquery-ui-1.8.2.custom.css');

mais dans ce cas, il te faudra un accès web, car les fichiers se trouve sur googleapi.

Il ne faut pas oubier que tu dois avoir le répertoire et les classes ZendX dans le répertoire /library

un énorme merci de vous soucier de mon problème. :ccool:
Je pensais la partie pas facile à gagner mais la...:calim2:
Citation:
Alors dans ton boostrap tu ajoutes ceci :
Code:

1 2 3 4 5 6 7 8 protected function _initView() { // Initialize view $view = new Zend_View(); $view->doctype('XHTML1_STRICT'); $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8'); $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper'); return $view; }
Mon bootstrap : C:\wamp\www\XXXXXXX\index.php
=> Nous parlons bien du même ? je dis cela parce que dans mon bootstrap, je n'ai aucune fonction jusque maintenant. :koi:

Citation:

Le reste du adapte à ton projet

que dois-je adapter ?? tout me semble correct ??:koi:

Citation:

Il ne faut pas oubier que tu dois avoir le répertoire et les classes ZendX dans le répertoire /library

Ou puis-je les trouver ?

Ce que j'ai téléchargé (Jquery Current Release 1.4.2 et jQuery UI)
je ne m'en sers pas ??

Merci encore !!;)

02/08/2010, 10h36
MaitrePylos

Citation:

Envoyé par cyrux

Mon bootstrap : C:\wamp\www\XXXXXXX\index.php
=> Nous parlons bien du même ? je dis cela parce que dans mon bootstrap, je n'ai aucune fonction jusque maintenant. :koi:

C:\wamp\www\xxxxxx\application\Boostrap.php.

Citation:

C:\wamp\www\xxxxxx\application\Boostrap.php.

Je n'ai aucun fichier de ce nom la ! à cet endroit je n'ai que le config.ini et c'est tout ! :aie:

Un bootstrap, c'est bien ceci ??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
error_reporting(E_ALL|E_STRICT);
ini_set('display_errors', 1);
date_default_timezone_set('Europe/Paris');
 
// mise en place des répertoires et chargement des classes
set_include_path('.'
. PATH_SEPARATOR . './library'
. PATH_SEPARATOR . './application/models/'
. PATH_SEPARATOR . get_include_path());
 
require_once 'Zend/Loader/Autoloader.php'; 
Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true);
 
// Chargement de la configuration
$config = new Zend_Config_Ini('./application/config.ini', 'general');
$registry = Zend_Registry::getInstance();
$registry->set('config', $config);
 
...

Je peux fournir le détail de ma structure si besoin.
Merci !!!

02/08/2010, 10h52
MaitrePylos

Tu suis quel tuto pour ton projet ?
02/08/2010, 10h55
cyrux

J'ai utilisé celui ci :
http://g-rossolini.developpez.com/tu...ework/debuter/

Il est un peu "ancien" mais m'a permis de comprendre pas mal de choses.
02/08/2010, 11h00
MaitrePylos

Et dans ce tutoriel, uil est clairement explicité de ne plus le suivre avec les verisons actuelle de ZF, mais de te reporter sur une mise à jour de ce tuto plus en accord avec les library que tu utilises ;)

Je te laisse chercher et tu verras cela sera plus clair pour toi
02/08/2010, 11h09
cyrux

Le fait est que mon projet est déjà à un stade bien avancé dirons nous et que je ne peux me permettre de recommencer tout de 0 (par manque de temps). :triste:

il existe beaucoup de modifications entre ancienne et nouvelle version ?

la méthode de freeseb74 a-t-elle aussi besoin de la "nouvelle version" ??

Quel tuto me conseilles tu ??

Je suis à la recherche de ce datepicker depuis début juillet et plus le temps passe, moins cela est clair !! :triste:
02/08/2010, 11h18
cyrux

je lis ce tutoriel :
http://s-jdm.developpez.com/tutoriel...end-framework/

Les modifications risquent d'être "très violentes" .... :cry:
02/08/2010, 11h22
MaitrePylos
Utilise alors la solution de freeseb74, et pour répondre à la question que tu te posais suite à sa proposition c'est ceci
Code:

1 2 <input type="text" name="date_gestion" id="date" />
02/08/2010, 11h26
cyrux

La solution de freeseb est elle similaire ? vais-je pouvoir utiliser "l'intégralité de jquery" (Date picker, "tableau roulant", bouton etc ...) ??:koi:

Je vais voir si je vais pas quand même passer à la version supérieure ...:?
mais le projet vas grandement prendre du retard ...
que me conseilles tu ??
02/08/2010, 11h35
MaitrePylos

La solution sera identique, tu peux utiliser jquery de plusieurs façon et celle-ci en est une
02/08/2010, 11h35
cyrux

Si je passe à la nouvelle version, me sera il possible de récupérer ce qui à déja été créé ?? (mes modèles, formulaires, mon indexcontroller ... etc) sans avoir à toucher à trop de choses ??
dans ce cas, je tenterais bien de suivre le formulaire de la 1.8 & 1.9.

Il existe des grosses divergences entre les versions ?

Je pourrais accorder une après midi à faire la mise à jour, mais pas plus, je suis déja "short in time" !!!

Je ne peut m'en prendre qu'a moi même malheureusement:traine: ...

que me conseilles tu ?? toi qui t'y connais pas mal !! (personnellement j'ai découvert html/php/php5/mysql/zend framework/jQuery sur 4 semaines donc j'y connais pas grand chose ...
02/08/2010, 11h47
cyrux

Pourrais tu me donner un peu plus d'explications concernant la méthode de Freeseb74 ??
comme par exemple ou placer les fichiers que j'ai téléchargé, que mettre dans mon modèle, ma vue, mon controlleur, histoire de me faire une idée et de prendre une décision ...

MERCI !!:ccool:
02/08/2010, 14h21
cyrux

Personne n'a d'informations sur la méthode de freeseb74 ?? Et sur les questions que j'ai préalablement posées ?
Je suis malheureusement totalement dans le flou et ne sais pas si je dois passer en 1.8/1.9 ou si je continue d'utiliser celle ci .... :hola:

Bonjour cyrus,

Je vois que tu es perdu, alors remettons les choses à leur place.

Tu veux insérer dans ton application le calendrier "datepicker" de Jquery. (doc officiel à lire SVP)

Ce n'est plus ni moins que du javascript à rajouter dans ta page de code, ZendX_JQuery est simplement la pour te faciliter la vie. Donc avant d'utiliser ZendX_Jquery il faut bien comprendre comment tout cela fonctionne.

JQuery est un framework Javascript au même titre que Prototype.
JQuery UI 'user interface' est la partie ergonomique de ce framework au même titre que Script.aculos.us pour Prototype.
Datepicker est un widget de JQuery UI.
La particularité de JQuery UI est le choix possible du thème qui se traduit par des couleurs différentes en gros des CSS (feuilles de styles différentes).

Le plus simple est de rendre ici http://jqueryui.com/download et de faire ces courses.

Décompresse les fichiers dans un répertoire (ex: monsite/public/js/jquery/ ) dans ton application, mais tu la déjà fait.

Il faut maintenant appeler les 2 bibliothèques javascript et la feuilles de style, de la manière suivante. (contrôle bien si tout je charge correctement avec la console Firefox)
Code:

1 2 3 4 5 6 7 8 <html> <head> <script src="http://localhost/monsite/public/js/jquery/jquery.1.4.2.js" type="text/javascript"> </script> <script src="http://localhost/monsite/public/js/jquery/ui/jquery-ui-1.8.2.custom.min.js" type="text/javascript"> <link rel="stylesheet" media="screen" type="text/css" href="http://localhost/monsite/public/css/ui-themes/ui-lightness/jquery-ui-1.8.2.custom.css" /> </head>
Maintenant que nous avons les outils javascript sous la main pour notre application, utilisons les.

Créer un fichier custom.js que tu appelleras de la même manière que précédemment et dans ce fichier colle le code suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // sur chargement du document DOM termniné (soit notre page HTML) $(document).ready(function() { $("#date").datepicker( { showButtonPanel: true , dateFormat: 'dd/mm/yy' , dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] , dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] , monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Août','Sep','Oct','Nov','Déc'] , monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] , prevText: 'Précédent' , nextText: 'Suivant' , closeText: 'OK' , currentText: "Aujour'dhui" }); }); //EOf:: DOM isReady
$("#date").datepicker( {option} ); Veux dire dans le langage JQUERY applique le composant 'datepicker' avec les options ici définit sur un élément ($) de la page HTML qui a un id='date' (#date)

Voir la doc officiel de JQuery ici

ZendX_JQuery permet de s'affranchir de tout cela mais il fait la même chose.

02/08/2010, 15h25
cyrux

Citation:

(contrôle bien si tout je charge correctement avec la console Firefox)

Comment fais tu sa ?? :| juste avec la barre de progression en bas a droite ou avec firebug ??

Je tente cela de suite et tien au courant rapidement :ccool:

Petit problème : :pastaper:

pour inclure mes boutons, champs texte ou autre j'utilise cette méthode.
Code:

1 2 3 4 5 6 7 $date_depart_dossier = newZend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setLabel('Date depart :') ->setRequired(true) ->addFilter('StripTags') ->addFilter('StringTrim') ->addValidator('NotEmpty');
ceci est un exemple d'un simple champ texte, je n'ai pas mis l'intégralité pour ne pas surcharger.

je ne peut donc me servir de cette ligne ci :

Code:

<input type="text" name="date_gestion" id="date" />

Une idée de comment faire ??

02/08/2010, 16h15
freeseb74
Cyrux,

En utilisant le Zend_Form_Element le id de ton élément correspond au nom de ton objet en l'occurence pour toi, vérifie ta page HTML pour t'en convaincre
Code:

1 2 3 4 5 6 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); // va rendre par défaut <input type="text" id="date_depart_dossier" />
Mais tu peux déclarer un id à ton objet en tant que nouvel attribut
Code:

1 2 3 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setAttrib('id', 'date');
Pour ma part les noms des objets Zend_Form_Element corresponde à mes champs de ma base de données, cela est beaucoup plus simple dans la compréhension et dans l'utilisation du $Form->populate();
02/08/2010, 16h29
cyrux
Avec ce code ci :
Code:

1 2 3 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setAttrib('id', 'date');
Effectivement, cela fonctionne parfaitement !!!
:ccool::ccool:
Le datepicker s'affiche, de façon "gigantesque" certes mais il s'affiche.
Chapeau les mecs !!!!! :king: :lahola::lahola: :king:

Une question :

Citation:

Mais tu peux déclarer un id à ton objet en tant que nouvel attribut

et quand j'ai plusieurs datepicker dans le formulaire,

Code:

$date_depart_dossier->setAttrib('id', 'date');

peut être réutilisé pour chacun ?? :koi: cela ne va pas poser de soucis ?

:merci::merci::merci::merci::merci::merci::chin::chin:
02/08/2010, 17h49
cyrux

bon après pas mal de tentative, effectivement, cela pose problème ... :whistle2:

il y a bien une subtilitée pour pouvoir placer plusieurs datepicker dans un formulaire ?? sans que ceux ci aient le même nom ?? :koi:

Une autre question :
est il normal que celui ci apparaisse de grande taille comparé à ce que j'ai demandé lors de mon téléchargement ??

Citation:

Pour ma part les noms des objets Zend_Form_Element corresponde à mes champs de ma base de données, cela est beaucoup plus simple dans la compréhension et dans l'utilisation du $Form->populate();

Pareil pour moi :D

Cyrux,

Concernant l'utilisation de plusieurs datepicker sur un formulaire il faut dupliquer le code javascript de configuration, pour plusieurs raisons :
- datepicker ne s'applique que sur un ID et non sur une class au sens HTML
- un ID doit être unique sur une page HTML (norme W3C)

Avec au moins 2 input date
Code:

1 2 3 <input type="text" id="date_depart_dossier"></input> <input type="text" id="date_fin_dossier"></input>
le code javascript
Code:

1 2 3 4 5 6 7 8 // sur chargement du document DOM termniné (soit notre page HTML) $(document).ready(function() { $("#date_depart_dossier").datepicker({ option }); $("#date_fin_dossier").datepicker({ option }); }); //EOf:: DOM isReady
N'oublie pas de lire la doc officiel
PS : Oui tout à l'heure je voulais dire console FIREBUG évidement.

Citation:

- un ID doit être unique sur une page HTML (norme W3C)

C'est pour cela que j'ai posé la question ;) afin de ne pas faire de bêtises.

Citation:

N'oublie pas de lire la doc officiel

C'est en cours :wow: c'est fou tout ce qui peut être fait avec Jquery !!!!

Citation:

Oui tout à l'heure je voulais dire console FIREBUG évidement.

:ccool: ta façon de le dire était totalement valable, ce n'est que moi qui ne connais pas encore bien les outils et qui suis trop "hésitant".

Autre chose, j'ai regardé un peu le code de jquery-ui-1.8.2.custom.css pour mon date picker, voici son code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left:2px; } .ui-datepicker .ui-datepicker-next { right:2px; } .ui-datepicker .ui-datepicker-prev-hover { left:1px; } .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
Il doit être similaire à beaucoup de monde, une question reste encore irrésolue, mon date picker s'affiche de façon "gigantesque", j'ai tenté de réduire sa taille en changeant cette ligne de code (et quelques autres ...) :

Code:

.ui-datepicker { width: 17em; padding: .2em .2em 0; }

mais lorsque je modifie le 17em par exemple, tout est décalé, mal fait, bref le datepicker est encore plus moche et tout aussi gigantesque :toutcasse:

Est-ce normal ? :koi:

03/08/2010, 10h36
freeseb74

Cyrux,

Pour ton problème d'affichage du calendrier, le plus sage est de travailler par élimination.
1) ne modifie pas les feuilles de style CSS de JQUERY UI c'est trop complexe et pense au mise à jour futur.
2) Désactive (retire les liens) des feuilles de style CSS et inclus les une par une en commençant par celle de JQuery UI et observe les changements.

Il faut apprendre à utiliser Firebug ici, c'est très utile.

JQuery est formidable pour modifier les pages HTML en live, mais il faut bien comprendre le DOM Modèle Objet de Documents, pour bien s'en servir.

Ma Devise "Apprendre, c'est se faciliter la vie".
03/08/2010, 11h25
cyrux

Ben dis donc, pas facile facile !!! :cfou:

j'ai testé ta méthode, effectivement elle permet de mieux cibler le problème ...
(j'ai quand même du modifier les lignes de code css pour arriver à quelque chose de mieux, tout est rentré dans l'ordre, il ne me reste plus que les 2 bouton (ajouter et ok) à réduire et le tour est joué.

D'autre part, il y avait "interférence" entre mon css et celui de jquery, comme par exemple mes table étaient pris en compte pour les 2, normal vous me direz ...:roll:

je continue mes tests et vous tiens au courant rapidement :ccool:

200ème post => qui amène la mention RESOLU !!!! ;-D

200ème post sur ce forum qui est des plus joyeux et qui peut se fêter dignement car il apporte la mention :resolu: à ce problème !!!

:bravo::chin::lahola::lahola::chin::bravo:

J'ai réussi à comprendre comment cela fonctionnait, :lun: avec une ENORME aide de votre part, pas mal de galères et d'essai, certes, mais bon on a rien sans rien !!! Comme vous me l'avez bien dit ;)

Voila un datepiker tout beau tout neuf (en moins gigantesque pour ceux que sa intéresse) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 11em; height: auto; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; font-size: .7em;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center;}
.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 50%; }
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%; }
.ui-datepicker table {width:100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; } 
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.3em 0 0 0; padding:0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em;  font-size: .7em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

Encore une fois :merci::merci::merci::merci::merci: