11521 sujets

JavaScript, DOM et API Web HTML5

Prise de rendez vous

Bonjour, je travaille sur un site web de prise de rendez vous, ou il y a évidemment des balises de date et de temps. Donc je voudrais savoir comment rendre une date ou une horaire non sélectionnable une fois qu'elle a été sélectionnée auparavant par un utilisateur .
Merci
Salut,

il faudrait nous donner un peu de ton code actuel pour que l'on voit comment tu as codé ton "calendrier".

(Globalement au moment ou tu génère l'affichage d'une semaine tu devrais pouvoir grisé des cases par exemple. Cela pourrait aussi être des éléments qui disparaissent de l'affichage quand ils ne sont pas disponibles)

Bref, il nous faut plus de détails sur l'existant pour que l'on puisse envisagé une solution adaptée.

Edit : J'avais bien aimé le système de réservation de sécuritest si tu cherches une source d'inspiration
Modifié par Mathieuu (29 Jul 2020 - 14:13)
alors j'ai utiliser un datetimepicker
voila pour le code HTML et e vous remercie d'avance 
<!DOCTYPE HTML>
<html >
    <head>
        <meta charset="UTF-8">
        <title>mon planing</title>
<!--style de la page--> <link rel="stylesheet" href="datetime.css">
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>




<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.map">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">


</head>
    <body>







         <br>
         <center> 
         <div class="cal">
            <div class="container">
              
                  <div class="div-head">
                        <div class="div-logo">  <img src="else/logo3.jpg" alt=""></div>
                        <div class="div-titre"> <img class="img-titre" src="else/titre5.jpg" alt=""></div>
                        
                    </div>
        
                  <div class="panel">
                        
                       <div class="panel-heading"><p>prennez vos rendez-vous en un seul click</p>
                    </div>
                       

<br><br>

                                   <div class="row">
                                      <div class="col-md-12">
                                           <h5>selectionnez une date et heure pour votre rendez-vous</h5>
                                           <br>
                                           
                          
                                              
                                              <div class="input-group date" id="datetimepicker">
                                              <form  method="post" action="insert.php">
                                              <input type="text" name="date_heure" class="form-control" />
                                       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
                                          
                                            </div>
                                     
                                  </div>
                                        </div>
                                    
<br>      
                 <input type="submit" class="btn" value="confirmer">
                 
                 <br>
                 <br>
                 <br>
                 </center>
          





                 </form>
                    </div>
               </div>
           </div>
      </div>

  

                
<!--modifier mon rendez vous-->

<footer>
  <center>
  
<p1>
               vous pouvez modifier et annuler  les rendez vous que vous avez reserver au part avant</p1> <br>

               <input type="reset" calss="btn" value="annuler">       
              
         <input type="submit" class="btn"  value="modifier">  
         <br><br>
         <p2> 
  
    merci  de respecter vos rendez-vous et vous rendre au laboratoir a l'heure, tout retard affect nos service ,
    on vous pris de bien vouloir respecter cela .
   </p2>


           


</center>



<footer>

<script>
$(function () {
     var date = new Date();
            var currentMonth = date.getMonth();
            var currentDate = date.getDate();
            var currentYear = date.getFullYear();
            $('#datetimepicker').datetimepicker({ 
              
              format:'MM/DD   HH:mm',
               minDate: new Date(currentYear, currentMonth, currentDate),// daysOfWeekDisabled: [0, 6],
            
                    disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 6 })], [moment({ h: 17, m: 30 }), moment({ h: 24 })]],
          enabledHours: [ 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
          stepping: 10
            }
                
                
                
                );
                    
        
    
        });

    </script>
        
    </body>
</html>




et voila pour le php 





<?php

$bd="L3*";
$host="localhost";
$user="root";
$pw="";
//connexion au serveur de bdd
@mysql_connect($host,$user,$pw) or die ("connexion impossible a la bdd");
mysql_select_db($bd)or die("connexion impossible a la bdd");


 
$date_heure=$_POST['date_heure'];
mysql_query("INSERT INTO  rdv (date_heure) VALUES('$date_heure')")or die(mysql_error());
//	include('confirmation.html');

//ajout
$insertIsOk=$date_heure;
if($insertIsOk){
    $message='rendez-vous ajouter la bdd';

}
else{
 
    $message='Echec  de l/ajout';}





   

    


    ?>
Apparemment tu fais sélectionner la date dans un datetimepicker de Bootstrap et tu voudrais que les heures déjà affectées à un RDV soient non sélectionnables?
il faut voir dans la doc du datetimepicker si il y a des indications mais ça me parait assez compliqué...
Il serait peut-être plus simple d'afficher un état (tableau) de la journée avec les horaires disponibles et le gars si il n'est pas trop bête il choisira un horaire parmi ceux qui sont disponibles et tu peux toujours contrôler la saisie avec javascript et afficher un message d'erreur dans le cas contraire...
Mais ça reste quand même assez compliqué, je ne sais pas à quel niveau tu te situes...

Quelques remarques:

- tu utilises une vieille version de Bootstrap (la 3.3.6), on est à la 4.3.1 qui est bien meilleure, ta version de JQuery est la 1 alors qu'on est à la 3 ... on dirait que tu as récupéré du code un peu ancien.
- tu as une coquille avec le mot 'class' ici : <input type="reset" calss="btn" value="annuler">
- je ne sais pas dans quel contexte tu fais ça mais cela semble destiné au clients d'un laboratoire, et il y a beaucoup de fautes dans ton texte....:
::les rendez vous que vous avez reserver au part avant -> les rendez vous que vous avez reservés auparavant
::et vous rendre au laboratoir a l'heure, tout retard affect nos service -> et vous rendre au laboratoire à l'heure prévue, tout retard pourra affecter nos services
::on vous pris de bien vouloir -> on vous prie de bien vouloir

Dans une interface, le texte visible par l’utilisateur doit être clair, explicite et correct syntaxiquement, il y a des clients (la plupart) qui sont forcément sensibles à ça...
le code que je vous ai envoyé est une sorte de brouillon mais merci quand meme.
alors en abondonnant l'idée du datetimepicker que dois-je faire ?
anyas a écrit :
le code que je vous ai envoyé est une sorte de brouillon mais merci quand meme.
alors en abondonnant l'idée du datetimepicker que dois-je faire ?


Il ne faut pas abandonner l'idée du time picker, mais vérifier si on peut invalider certaines plages horaires (avec disabledTimeIntervals)

regardez ce code pen :

si vous allez au 5 déc 2017 vous ne pouvez pas sélectionner entre 08:40 et 09:20
il semble qu'on peut utiliser le tableau disabledTimeIntervals: avec plusieurs valeurs


disabledTimeIntervals: [
      [moment("2017-12-05 8:40"),moment("2017-12-05 9:20")],


et il faudrait les détecter à partir de la base de données et les passer à Javascript...

mais ça reste un exercice assez compliqué il faut passer des données entre Php et javascript en se servant d'attributs dans le code html..
Sujet clos
Aller à