+ Répondre à la discussion
Page 1 sur 2 12 DernièreDernière
Affichage des résultats 1 à 20 sur 35
  1. #1
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut Calendrier plages horaires cliquables

    Bonjour,

    Au lieu de vous expliquer longuement ce que je cherche à faire, je vous invite à regarder l'exemple que j'ai trouvé provenant d'un site de réparation de smartphone, tablettes etc.

    http://www.phoneglass.fr/reparation/atelier.html

    Descendre en bas de la page.

    J'aimerais savoir si un code JavaScript de ce type à déjà était mis en place par l'un d'entre vous?

    Merci d'avance.

  2. #2
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Non mais je ne vois rien de bien méchant à faire: un coup d'ajax pour aller de mois en mois et un évènement pour le click sur une plage horaire de réservation.

  3. #3
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Merci de ta réponse,

    Je pense qu'on est loin d'avoir le même niveau^^

    J'ai essayé de reproduire la mise en forme de l'exemple que j'ai donné dans un tableau html, dans lequel seul les dates en début de ligne varient tout les jours. La première ligne de chaque colonne correspond à une heure. Le reste du tableau ne contient que des images. Lors du clique sur une image, je pourrais récupérer toutes les infos dont j'ai besoin (date et heure).

    Je ne compte pas permettre le changement de mois.

    Par contre j'aimerais savoir comment mis prendre en Ajax pour permettre simplement à la personne de pouvoir cliquer à plusieurs endroit différents et de récupérer seulement les valeurs du créneau choisi lors de la validation.

    Je pense utiliser la méthode POST pour récupérer les données.

    Désolé de te déranger avec des questions aussi simples mais je réalise actuellement mon premier site.

  4. #4
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Ah d'accord, on peut pas dire que tu aies choisi la facilité pour débuter

    Qu'a cela ne tienne: une solution simple consiste à faire porter sur les cellules (td) de ton tableau un timestamp (qui correspond à la date / heure) dans un attribut arbitraire. Ensuite, au clic sur cette cellule, cette donnée sera lue et insérée en tant que champ masqué dans un formulaire. Ainsi, l'utilisateur pourra cliquer autant de plages horaires qu'il veut.

    Voici à quoi ça peut ressembler avec du jQuery:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    <table id="plages">
      <tr>
         <td time="1311697530">&nbsp;</td>
         ...
      </tr>
      ...
    </table>
    <script type="text/javascript">
    $('#plages td').click(function () {
      var timtestamp = $(this).attr('time');
      $('#formulaire').append('<input type="hidden" name="h[]" value="' + timestamp + '" />');
    });
    </script>

  5. #5
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Encore merci pour ta réponse.

    J'essaie actuellement de la mettre en place.

    Je viens de réaliser que je vais rencontrer un autre problème concernant les dates.

    Est-ce qu'il est possible d'exclure les Dimanches?

    J'étais parti sur la gestion des dates suivante:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
     
    		<?php
    				$demain_secondes = time() + (3600 * 24 * 4);
     
    				$dateDuJour = $jour[date("w",$demain_secondes)]." ".date("d",$demain_secondes)." ".$mois[date("n",$demain_secondes)]." ".date("Y",$demain_secondes);
     
    				echo $dateDuJour;
    		?>

  6. #6
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    J'ai testé ce que tu m'as passé.
    J'ai passé le input en type text pour faire des tests.

    Il ne s'affiche pas et rien ne se passe lors du clique. Il doit manquer quelque chose d'évident que tu n'as pas précisé.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    <table  id="plages">
     
    	<tr>
    		<td time="1311697530">
    			<img src="images/vert.png"/>
    		</td>
            </tr>
     
    </table>
     
     
    	<script type="text/javascript">
    		$('#plages td').click(function () {
    		  var timtestamp = $(this).attr('time');
    		  $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
    		});
    	</script>
     
    <form id="formulaire">
    </form>

  7. #7
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Tu as bien chargé la librairie jQuery dans le head de ta page ?

  8. #8
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Oui elle est dans la page index qui appel les autres par un require.

    Je l'utilise pour l'instant pour faire des showcases.

  9. #9
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Il y avait une typo dans le code JS:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <table id="plages">
    	<tr>
    		<td time="1311697530">Click Me</td>
    	</tr>
    </table>
    <form id="formulaire">
    </form>
     
    <script type="text/javascript">
    	$('#plages td').click(function () {
    	  var timestamp = $(this).attr('time');
    	  $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
    	});
    </script>

  10. #10
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Parfait ça marche, merci beaucoup.

    Une idée sinon pour gérer les dates et exclure les dimanches.

    La première ligne correspond à a date du jour et les lignes suivantes les jours qui suivent.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    				$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
     
    				$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
     
    $demain_secondes = time() + (3600 * 24);
    if  (date("d",$demain_secondes)=="Dimanche"){
         $demain_secondes = $demain_secondes + (3600 * 24);
    }
    				$dateDuJour = $jour[date("w",$demain_secondes)]." ".date("d",$demain_secondes)." ".$mois[date("n",$demain_secondes)]." ".date("Y",$demain_secondes);
     
    				echo $dateDuJour;
    Ceci doit marcher.
    Mais n'y a t'il pas plus simple?

  11. #11
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Petit hic.

    Le append me crée autant de input que de click.

    J'aimerais que ça ne fasse que modifier le contenu du input.

  12. #12
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Quelque chose du style:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    date_default_timezone_set('Europe/Paris');
     
    $now = time();
    $then = strtotime('+28 days', $now); // dans 4 semaines
     
    $current = $now;
    do {
      if (date('D', $current) == 'Sun') // ou Dim selon la locale
        continue;
      echo "Date: " . date('D d/m/Y', $current) . '<br />';
    } while (($current = strtotime('+1 days', $current)) && $current <= $then);

  13. #13
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Citation Envoyé par City-zen Voir le message
    Petit hic.

    Le append me crée autant de input que de click.

    J'aimerais que ça ne fasse que modifier le contenu du input.
    Mets ça:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
    	$('#plages td').click(function () {
    	  var timestamp = $(this).attr('time');
              if (!$('#formulaire input[value="' + timestamp + '"]').length)
    	    $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
              else
                $('#formulaire input[value="' + timestamp + '"]').remove();
    	});
    </script>

  14. #14
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Bon ben tout marche niquel.

    J'ai de quoi faire.

    J’espère ne plus rencontrer de problème.

    Merci, je mettrai la version finale en ligne.

  15. #15
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Déjà un petit soucis...

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <script type="text/javascript">
    	$('#plages td').click(function () {
    	  var timestamp = $(this).attr('time');
              if (!$('#formulaire input[value="' + timestamp + '"]').length)
    	    $('#formulaire').append('<input type="text" name="h[]" value="' + timestamp + '" />');
              else
                $('#formulaire input[value="' + timestamp + '"]').remove();
    	});
    </script>
    Ce code permet de supprimer le champ si la personne reclick sur au meme endroit ce qui est très bien.
    Mais lorsqu'il clique ailleurs cela continue de créer un nouveau champ.
    Je n'ai pas trouvé comment on modifier simplement la valeur.
    Je suis très mauvais en JS comme tu peux le voir...

  16. #16
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Ah j'avais pas du tout compris ça, je croyais que tu voulais permettre la sélection de plusieurs plages horaires...

    Du coup c'est bateau comme problème:
    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
     
    <!-- a mettre dans le head -->
    <style type="text/css" media="screen"> 
    #plages td {
      background-color: #0f0;
      cursor: pointer;
    }
     
    #plages td.clicked {
      background-color: #f00;
    }
    </style>
     
    <!-- a mettre dans la page -->
    <table id="plages">
      <tr>
        <td time="123">xxx</td>
        <td time="456">yyy</td>
        <td time="789">zzz</td>
      </tr>
    </table>
    <form action="...">
       <input type="hidden" id="time" value="" />
       <input type="submit" value="Réserver" />
    </form>
    <script type="text/javascript">
    <!--
    $(function () {
      $('#plages td').click(function () {
         $('#plages td').removeClass('clicked');
         $(this).toggleClass('clicked');
         $('#time').val( $(this).attr('time') );
      });
    });
    //-->
    </script>
    Tout bêtement.

    Note que cette façon de former des tableaux n'est pas XHTML compliant. Normalement, tu dois créer les sections thead, tfoot et tbody (dans cet ordre).

  17. #17
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    Excellent,

    Cette fois c'est exactement ce que je recherchais.

    Il me reste plus qu'à faire le lien avec l'API google agenda pour enregistrer les plages sélectionnées et empêcher de cliquer sur les plages horaires prisent.

    Je sais pas si ça va être plus simple...

  18. #18
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Tu peux emêcher les utilisateurs de cliquer sur une plage horaires en modifiant comme ça:
    Code :
    1
    2
    3
    4
    5
    // Remplacer 
    $('#plages td').click(function () {
     
    // par
    $('#plages td:not(.picked)').click(function () {
    Avec l'exemple ci-dessus:
    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
    <!-- a mettre dans le head -->
    <style type="text/css" media="screen"> 
    #plages td {
      background-color: #0f0;
      cursor: pointer;
    }
     
    #plages td.clicked {
      background-color: #f00;
    }
     
    #plages td.picked {
      background-color: orange;
    }
    </style>
     
    <!-- a mettre dans la page -->
    <table id="plages">
      <tr>
        <td time="123">xxx</td>
        <td time="456" class="picked">yyy</td>
        <td time="789">zzz</td>
      </tr>
    </table>
    <form action="...">
       <input type="hidden" id="time" value="" />
       <input type="submit" value="Réserver" />
    </form>
    <script type="text/javascript">
    <!--
    $(function () {
      $('#plages td:not(.picked)').click(function () {
         $('#plages td').removeClass('clicked');
         $(this).toggleClass('clicked');
         $('#time').val( $(this).attr('time') );
      });
    });
    //-->
    </script>
    Attention: cette manip ne te dispense pas des vérifications d'usage à faire en PHP.

  19. #19
    Invité de passage
    Inscrit en
    juillet 2008
    Messages
    28
    Détails du profil
    Informations forums :
    Inscription : juillet 2008
    Messages : 28
    Points : 1
    Points
    1

    Par défaut

    C'est parfait mais ça va m'obliger à abandonner ma logique de boucle.

    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
     
    <table id="plages">
    <tr>
    	<th></th>
        <th colspan="4">10h</th>
        <th colspan="4">11h</th>
        <th colspan="4">12h</th>
        <th colspan="4">13h</th>
        <th colspan="4">14h</th>
        <th colspan="4">15h</th>
        <th colspan="4">16h</th>
        <th colspan="4">17h</th>
        <th colspan="4">18h</th>
        <th colspan="4">19h</th>
      </tr>
    <?php
    $jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
    $mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
    date_default_timezone_set('Europe/Paris');
     
    $now = time();
    $then = strtotime('+7 days', $now); // dans 4 semaines
     
    $current = $now;
     
    do {
      if (date('D', $current) == 'Sun') // ou Dim selon la locale
        continue;
    	$dateDuJour = $jour[date("w",$current)]." ".date("d",$current)." ".$mois[date("n",$current)]." ".date("Y",$current);
    	echo  '<tr><th>'.$dateDuJour.'</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;&nbsp;</th><th>&nbsp;</th><td class="picked" time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td><th>&nbsp;</th><td time="123">00</td><td time="456">20</td><td time="789">40</td>';
    } while (($current = strtotime('+1 days', $current)) && $current <= $then);
     
    ?>
     
     
     
      </tr>
    </table>
    <form action="...">
       <input type="text" id="time" value="" />
       <input type="submit" value="Réserver" />
    </form>
    <script type="text/javascript">
    <!--
    $(function () {
      $('#plages td:not(.picked)').click(function () {
         $('#plages td').removeClass('clicked');
         $(this).toggleClass('clicked');
         $('#time').val( $(this).attr('time') );
      });
    });
    </script>
    Car là ça empêche la réservation tout les jours de 16h à 16h20.

    Mais je vais devoir me poser et réfléchir à comment gérer toutes les régles de gestions maintenant (Selon les choix précédents de l'utilisateur, le click pourra parfois sélectionner 2 cases consécutive; les plages horaires prises sur google agenda ne devront pas être cliquables et la validation du choix de plage horaire devra écrire dans le google agenda).

    On peut dire que je suis pas rendu^^

    En tout cas merci beaucoup parce que sans toi je serais loin d'en être là où j'en suis

  20. #20
    Expert Confirmé Sénior
    Avatar de Benjamin Delespierre
    Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    3 931
    Détails du profil
    Informations personnelles :
    Âge : 27
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : février 2010
    Messages : 3 931
    Points : 8 401
    Points
    8 401

    Par défaut

    Juste un conseil: tu ne devrais pas mélanger le PHP et le HTML, ça deviens très rapidement le chaos !

    Ce qu'il faut que tu fasse c'est séparer les traitements de l'affichage: un script pour recevoir et traiter les données et un autre (une vue) qui se chargera de les afficher. Si tu te sens l'âme d'un guerrier, tu peux commencer à industrialiser tes codes en suivant le formalisme MVC, c'est payant à long terme.

    Je te rappelle aussi que tu peux utiliser la totalité des structures de contrôles avec cette syntaxe dans les vues, afin de ne pas se perdre dans les tabulations:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <ul>
      <?php foreach ($list as $value): ?>
      <li><?=$value?></li>
      <?php endforeach ?>
    </ul>
    <?php if ($variable == "valeur"): ?>
    <span>Cas n°1</span>
    <?php elseif ($variable == "autre valeur"): ?>
    <p>Cas n°2</p>
    <?php else: ?>
    <div>Cas n°3</div>
    <?php endif ?>
    C'est beaucoup plus propre non ?

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •