Datepicker dans une boucle

**jpguiche** · 21/04/2015, 20h36

Bonjour,

Je veux instancier un datepicker dans une boucle à l'intérieur d'une form et ça ne marche pas.
Si j'enlève le [$i] ça marche, donc il semble ne pas être possible d'utiliser un tableau, or j'en ai besoin car j'ai un nombre variable de dates à saisir.

Quelqu'un a-t-il une idée ?

Code :

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

1
2
3
4
5
6
7
8
<form ...>
// boucle sur $i :
 
echo "$('#plage[$i]').datepicker();" ; // j'instancie un datepicker par élément du tableau
echo "<input type='text' id='plage[$i]' name='date[$i]' value=$date>" ; // je saisis une date 
 
// fin boucle
</form>

**headmax** · 22/04/2015, 12h25

Salut au vue du code qu'on dispose pour t'aider, il me semble que tu utilise une variable JS à l'intérieur de double et de simple quotes encapsulé dans du code PHP

.

1) Tu fait une boucle en PHP et tu souhaite y parser du JS pas nécessaire ... de mélangé les deux codes

2) La variable que tu déclare $('#plage[$i]').datepicker() ne parse pas du html et n'est même pas dans des balises scripts

donc sert a rien

Code :

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

1
2
 
"$('#plage[$i]').datepicker();"

Solution :

1) déclarer en bas de page ou dans une fonction body.onload le datepicker et juste récupérer la somme du tableau pour boucler en js sans mélanger.

Code :

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

1
2
3
4
5
6
7
8
9
 
<script>
$(document).ready(function(){
   var num_pickers = '<?php echo count($montableau); ?>';
   for(var i=0; i< num_pickers; i++){
      $('#plage[' + i + ']').datepicker();
   }
});
</script>

L'idée est là bonne continuation.

**Bovino** · 22/04/2015, 14h07

Ou plus sobrement

Code :

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

1
2
3
$(function(){
      $('[id^=plage]').datepicker();
});

**SylvainPV** · 22/04/2015, 15h12

ou des <input type="date"> avec polyfill ? *regard plein d'espoir*

**ABCIWEB** · 22/04/2015, 18h30

Salut,

Au passage un exemple d'utilisation de date picker au format français avec plusieurs champs de date (qui peuvent être générés dans une boucle) et retour des champs date au format sql :

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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?php
$form = filter_input(INPUT_POST, 'ok');
if($form){
        foreach ($_POST['date'] as $key => $date){
                try{
                        if(trim($date) == false){
                                throw new Exception('Date_Vide');
                        }
                        $d = new DateTime($date);
                        $d = $d->format('Y-m-d');
                        echo 'date '.$key.' = '. $d;
                        echo '<br>';
                }
                catch(Exception $e){
                        $erreur = $e->getMessage();
                        echo $erreur == 'Date_Vide' ? 'date '.$key.' = Date vide' : 'date '.$key.' = Erreur de date';
                        echo '<br>';
                }
        }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - French calendar</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function(){                  
        var datepicker = function(saisie,envoi){
                saisie.datepicker({
                monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
                dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
                dateFormat: "DD d MM yy"
                })
                .on('change', function(){
                        var date = $(this).datepicker( "getDate" );
                        date = $.datepicker.formatDate("yy-mm-dd", date);
                        envoi.val(date);
                })
        }
        var form = $('#form1').find("form");
        var saisie = form.find("input[data-picker=picker]");
        var envoi = form.find("input[data-picker=date]");
        if(saisie.length == envoi.length){
                saisie.each(function(i){
                        datepicker($(this),$(envoi[i]));
                });
        }
        else{
                alert('Le nombre de champs de saisie ayant l\'attribut data-picker="picker" est différent du nombre de champs d\'envoi des données ayant l\'attribut data-picker="date"')
        }
});
</script>
</head>
<body>
    <div id = "form1">
        <form ation = "#" method="post">
            <label><span style=" text-decoration:underline">Date 0</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
            <label><span style=" text-decoration:underline">Date 1</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
             <label><span style=" text-decoration:underline">Date 2</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[]" data-picker="date" type="hidden"  value="">
           <input name="ok" type="submit" value = "envoyer">
       </form>
   </div>
</body>
</html>

Le script est autonome (tant que les liens vers jquery perdureront) tu peux donc le tester rapidement dans une page vierge si cela t'intéresse.

**jpguiche** · 23/04/2015, 18h22

Merci à tous pour votre solidarité d'informaticiens !

Je ne pige pas tout car j'ai fait un tout petit peu de JS et encore moins de JQuery. J'ai récupéré un morceau de code mais je ne maîtrise pas complètement la situation.
Je vais donc approfondir avec vos inputs.

A+
JP

**ABCIWEB** · 24/04/2015, 19h35

Salut,

Concernant mon exemple, tu pourrais tu demander pourquoi je cible les champs input d'envoi des données avec var envoi = form.find("input[data-picker=date]"). J'aurais pu faire aussi var envoi = form.find("input[name=date[]").

L'avantage de désolidariser la récupération des champs input par rapport à la valeur de leur nom permet de personnaliser le nom des champs date du formulaire très facilement sans avoir rien à changer dans le code javascript ni php. Par exemple si tu veux des champs nommés plutôt que numériques (comme dans l'exemple précédent), il te suffira de faire :

Code html :

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

1
2
3
4
5
6
7
8
9
<form ation = "#" method="post">
            <label><span style=" text-decoration:underline">Date naissance</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[naissance]" data-picker="date" type="hidden"  value="">
            <label><span style=" text-decoration:underline">Date fête</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[fete]" data-picker="date" type="hidden"  value="">
             <label><span style=" text-decoration:underline">Date anniversaire</span> <input type="text" data-picker="picker" style="width:180px"></label>
            <input name="date[anniversaire]" data-picker="date" type="hidden"  value="">
           <input name="ok" type="submit" value = "envoyer">
       </form>

Et le reste du code javascript et php reste inchangé

**SylvainPV** · 24/04/2015, 21h13

J'interviens encore car le datepicker est vraiment un sujet particulier pour moi (disons emblématique d'un problème récurrent). Il se trouve qu'il existe un standard HTML pour la saisie de dates, <input type="date">, que beaucoup de navigateurs traitent en ajoutant leur propre datepicker. Les avantages du standard sont très nombreux :
- meilleure sémantique
- moins code ajouté à télécharger par l'utilisateur
- ergonomie du datepicker optimisée pour le terminal (sur mobile par exemple)
- style du datepicker associé au système/navigateur de l'utilisateur
- le datepicker du navigateur étant le même sur tous les sites, l'utilisateur n'a aucun mal à s'en servir: il le connaît déja
- des options et des méthodes de validation sont intégrées dans la spécification
- localisation gérée par le navigateur ! ça c'est génial : vous ne savez pas quel est le format de date utilisé en chine, et vous n'avez pas de traducteur chinois ? pas grave, le navigateur se charge pour vous de traduire les textes et le format de date affiché

Le seul point noir est que les navigateurs n'intègrent pas tous de datepicker (Firefox, IE et Safari, qu'est-ce vous attendez ? voir http://caniuse.com/#feat=input-datetime). Mais il y a une solution pour ces navigateurs là : le polyfill ! c'est un petit script, du même accabit que le plugin jqueryque tu utilises déjà, qui va venir détecter si le standard est supporté et le cas contraire ajouter son propre datepicker de secours (en javascript donc). C'est complètement transparent et très facile d'utilisation.

Voici un de ces polyfills avec une explication en français (enfin en canadien) : http://wet-boew.github.io/v4.0-ci/do...picker-fr.html

Ayé, j'ai fini ma plaidoirie. Allez en paix, et vive les standards !

Datepicker dans une boucle

JavaScript

Discussions similaires

Partager

Partager