En Vrac : Jquery plusieurs datepicker dans la mème page

Lorsque j'ai eu besoin de mettre en oeuvre un datepicker j'ai d'abord pensé au HTML5. Le nouveau type date devait solutionner le problème.

Malheuresement celui ci n'est pas compatible avec Firefox 19. Il a donc fallu que je me rabatte sur une autre solution. J'ai donc découvert la solution Jquery:datepicker.

Après plusieurs essai, j'ai trouvé la fonction, et puis j'ai surtout trouvé un script pour avoir un fonctionnement en francais, avec la mise en couleur des samedi et dimanche. J'ai trouvé la solution http://forum.alsacreations.com/topic-5-62863-1-Resolu-Calendrier-en-jquery-datepicker-La-galere-.html

Pour la partie css

.ui-datepicker-week-end a.ui-state-default {

color:#FFFFFF;

background-image:none;

background-color:#FF0000;

}

.ui-datepicker-week-end a.ui-state-hover {

color:#FFFFFF;

background-image:none;

background-color:#CC0000;

}

.ui-datepicker-week-end a.ui-state-active {

background-image:none;

background-color:#FFFFFF;

color:#0074c7;

}

et pour la partie du script

        $(function() {

$( "#datepicker" ).datepicker({

showOn: "button",

buttonImage: "../css/images/calendar.gif",

buttonImageOnly: false,

changeMonth: true,

changeYear: true,

showWeek: true,

    beforeShowDay: '',

showAnim: "show",

                        numberOfMonths:2,

                        prevText: "Earlier"

});

});

Il me suffit donc d'avoir dans mon fichier HTML un champs :

<input type="text" name="date" value="<?php htmlout($date); ?>" id="datepicker"/>

Et voila un magnifique datepicker. Il ne faut pas oublier d'inclure les références jquery (pour moi en local) :

    <script src="../include/jquery-ui/js/jquery-1.9.1.js"></script>

    <script src="../include/jquery-ui/js/jquery-ui-1.10.1.custom.min.js"></script>

    <script src="../include/jquery-ui/js/jquery.ui.datepicker-fr.js"></script>

Quand on regarde sur http://jqueryui.com/datepicker/ l'utilisation de datepicker celui ci est basé sur l'id du champs "#".

Cette limite ne permet de n'avoir qu'un seul champs datepicker dans un formulaire. La solution est très simple, il suffit de remplacer le "#" par "." pour que le datepicker fonctionne sur la class.

 $( ".datepicker" ).datepicker({

<input type="text" name="date" value="<?php htmlout($date); ?>" class="datepicker"/>

Sans doute très simple et étant de faite pour les experts.