Struts 2 + JQuery-plugin 3.1.1 datepicker en français

Version imprimable

Bonjour,

Dans mon projet en cours, j'offre à l'utilisateur de sélectionner une date depuis un calendrier. Pour cela j'ai utilisé le plugin JQuery pour struts 2 dans sa version 3.1.1

Cela marche très bien jusqu'à ce que j'essaie de mettre le datepicker en français avec le script adéquate. Là c'est la catastrophe. Les différents paramètres que j'ai mis en place sont ignorés, et le pire est que le calendrier n'apparait plus. Sans le petit script de localisation cela marche nickel, avec cela plante. J'ai déjà parcouru le site du plugin, mais je n'ai pas trouvé grand chose d'utilisable à ce sujet.

J'ai déjà aussi essayé d'inclure le script en fin du fichier jsp en l'y copiant directement, mais là également cela me fonctionne pas.

Avez vous des suggestions à me proposer pour le basculer en français ?

voici un extrait du code de ma jsp que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <sj:head locale="fr_FR" jqueryui="true" jquerytheme="start"/> <script language="javascript" src="../scripts/jquery.maxlength.js"></script> <script language="javascript" src="../scripts/jquery.ui.datepicker-fr.js"></script> </head> ... <s:form> ... <sj:datepicker value="today" displayFormat="dd/mm/yy" label="%{getText('label.action.datebutoir')}" showButtonPanel="true"/> </s:form>
Sous firefox et IE j'obtiens un message d'erreur similaire :
Code:

1 2 3 Erreur*: $.datepicker is undefined Fichier Source*: http://localhost:8080/.../scripts/jquery.ui.datepicker-fr.js Ligne*: 4
Voici le script pour la localisation:
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 /* French initialisation for the jQuery UI date picker plugin. */ /* Written by Keith Wood (kbwood{at}iinet.com.au) and Stéphane Nahmani (sholby@sholby.net). */ jQuery(function($){ $.datepicker.regional['fr'] = { closeText: 'Fermer', prevText: '<Préc', nextText: 'Suiv>', currentText: 'Courant', monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'], monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun', 'Jul','Aoû','Sep','Oct','Nov','Déc'], dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'], dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'], dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'], weekHeader: 'Sm', dateFormat: 'dd/mm/yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ''}; $.datepicker.setDefaults($.datepicker.regional['fr']); });

Nouveauté dans mon problème,

J'utilise également un script jQuery qui me permet de fixer la taille d'un textarea. D'après mes essais, le petit bout de code en fin de ma page jsp entrerait en interférence avec le script de localisation du datepicker. Pourquoi, comment, je l'ignore totalement, me contentant de reprendre les morceaux de code me servant. Et j'avoue être un grand débutant en AJAX.

Est ce quelqu'un a une suggestion à faire face à ce problème ?

Voici les codes utilisés :

code présent en fin de ma jsp pour exécuter le script et interférant avec la localisation en fr
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> jQuery(document).ready(function($) { //Set maxlength of all the textarea (call plugin) $().maxlength(); }); </script>
Code de la fonction de contrôle de la taille saisie :
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 25 26 27 28 29 30 31 32 /* * * Textarea Maxlength Setter JQuery Plugin * Version 1.0 * * Copyright (c) 2008 Viral Patel * website : http://viralpatel.net/blogs * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ jQuery.fn.maxlength = function(){ $("textarea[@maxlength]").keypress(function(event){ var key = event.which; //all keys including return. if(key >= 33 || key == 13) { var maxLength = $(this).attr("maxlength"); var length = this.value.length; if(length >= maxLength) { event.preventDefault(); } } }); }

J'ai fini par résoudre le problème, mais sans réellement savoir ce qui bloquait.
Pour cela, j'ai utilisé un autre plugin JQuery qui fait la même chose et ne me bloque pas mon datepicker.

Voici les codes source :

code pour la page web :

Code:

1
2
3
4
5
6
 
<script type="text/javascript">
        $(document).ready(function(){
                $('textarea').maxlength();
         });
</script>

Et voici le code du script :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
/**
 * Plugin maxlength for textarea
 *
 * @author Grégoire ROBIN
 * @copyright http://www.nodashi.com under CC3
 */
jQuery.fn.maxlength = function(){
 
    function updateCptTextarea(textarea){          
 
        var length      = $(textarea).attr('value').length;
        var maxLength   = $(textarea).attr('maxlength');
 
        $(textarea).next('.cpttextarea').html('<small ' + ((length > maxLength)?'style="color: #CC0000;"':'') + '>Taille de la saisie : ' + length + '/' + maxLength + '</small>');
    }
 
    $("textarea[maxlength]").bind('blur', function(){
 
        var maxLength   = $(this).attr('maxlength');
        var length      = $(this).attr('value').length;
 
        if(length > maxLength) {
            alert('Votre saisie est trop longue, elle a été coupée à la taille maximum autorisée.');
            $(this).attr('value', $(this).attr('value').substring(0, maxLength));
        }
 
        updateCptTextarea(this);
    });
 
    $("textarea[maxlength]").keypress(function(event){
 
        var key         = event.which;
        var maxLength   = $(this).attr('maxlength');
        var length      = $(this).attr('value').length;
 
        if(key >= 33 || key == 13) {
            if(length >= maxLength) {
                event.preventDefault();
            }
        }
 
        updateCptTextarea(this);
    });
 
    $("textarea[maxlength]").keyup(function(event){
        updateCptTextarea(this);
    });
 
    $("textarea[maxlength]").each(function(i){
 
        var maxLength   = $(this).attr('maxlength');
        var length      = $(this).attr('value').length;
 
        $(this).after('<div class="cpttextarea"></div>');
        updateCptTextarea(this);
    })
}