Discussion :

[piotrowski-s]

Bonjour à toutes et à tous,

étant donné le problème récent auquel j'ai été confronté, à savoir le manque de compatibilité entre les différents navigateurs tel que FF et IE,
j'ai donc décider d'utiliser le jquery datepicker.

Le soucis c'est que sur toutes mes pages tous mes champs étaient déjà de type date,

j'ai donc du utiliser un script qui transforme le type date et en type text, sachant que lorsque les navigateurs seront tous opérationnels

je n'aurais plus qu'à retirer ce petit script car je me vois mal refaire le tri sur toutes les pages pour changer le type text et le remettre en date
lorsque le moment viendra.


En fait j'ai donc le code suivant:

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
24
25
26
27
28
29
30
31
32
33
<script>
    jQuery(function($){
        $.datepicker.regional['fr'] = {
            closeText: 'Fermer',
            prevText: '&#x3c;Préc',
            nextText: 'Suiv&#x3e;',
            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']);
    });
    $(function() {
        $("input[type=date]").each(function () { var $this = $(this); $this.replaceWith($('<input type="text" class="datepicker"/>').attr({ name: $this.attr("name"), id: $this.attr("id"), required: $this.attr("required"), value: $this.attr("value") })); });
        $( ".datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true,
            showWeek: true,
            beforeShowDay: '',
            showAnim: "show"
        });
    });
    </script>

Mais c'est bel et bien cette ligne qui change les champs date en champs text

Code :

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

$("input[type=date]").each(function () { var $this = $(this); $this.replaceWith($('<input type="text" class="datepicker"/>').attr({ name: $this.attr("name"), id: $this.attr("id"), required: $this.attr("required"), value: $this.attr("value") })); });

Du coup je récupère tous les attributs, arguments et leur valeur.

Le problème est avec la propriété required qui semble être maintenant reconnue par tous les navigateurs sauf opera ou safari je crois, enfin l'un des deux.

du coup j'ai mis cela: required: $this.attr("required") sauf que cela n'est pas du tout adapté car en fait il me rajoute sur toutes les balises concernées
required="required" Or ce que je voudrais c'est juste avoir un required, la ou il y en a deja un.

du coup je ne sais pas trop comment faire.


Par avance merci pour votre aide.

[Bovino]

du coup je ne sais pas trop comment faire.

Eviter de se faire des noeuds au cerveau peut être un bon début

Code :

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

$("input[type=date]").each(function () {this.type = 'text';});

EDIT : je précise au passage que pour certains anciens navigateurs, l'attribut type est read-only, mais ça ne pose pas de problème car ces navigateurs ne reconnaissant pas le type date, ils se comportent comme des type texte

[piotrowski-s]

Bonjour,

merci pour votre réponse rapide.

Avec ce code ci :

Code :

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

$("input[type=date]").each(function () {this.type = 'text';});

je n'ai ni message d'erreur ni de script fonctionnel.
En fait, le calendrier n'apparait pas car il manque la classe. Du coup, j'ai essayé comme cela :

Code :

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

$("input[type=date]").each(function () {this.type = 'text',this.class = 'datepicker';});

Et aussi comme cela :

Code :

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

$("input[type=date]").each(function () {this.type = 'text';this.class = 'datepicker';});

Mais rien ne fonctionne parmi les deux.

[Bovino]

Code :

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

this.class = 'datepicker';

class est un mot réservé en JavaScript ! Pour affecter un nom de classe, c'est
this.className = 'datepicker';

[SpaceFrog]

Code :

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

$("input[type=date]").each(function () {$(this).attr('type', 'text'); $(this).addClass('datepicker');});

[piotrowski-s]

Merci pour votre retour,

avec le dernier code, cela me renvoi ça comme message dans la console

Code :

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

Uncaught Error: type property can't be changed

[SpaceFrog]

alors suis les conseils de Beef

Code :

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

1
2
 
$("input[type=date]").each(function () {$(this).addClass('datepicker');});

[Bovino]

Oui, je me suis rendu compte de ça récemment : jQuery n'accepte pas la modification du type
D'où le fait de passer directement par l'élément DOM

[danielhagnoul]

Code :

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

1
2
3
4
5
6
7
8
// le type est une propriété du DOM
// http://api.jquery.com/prop/
 
$( "input[type='date']" ).each( function(){
	$( this )
		.prop( "type", "text" )
		.attr( "class", "datepicker" );
});