Discussion :

[Saturos2k4]

Bonjour,

J'utilise jquery datetimepicker (depuis https://github.com/xdan/datetimepicker) en mode INLINE et j'essaie de désactiver certaines heures spécifiques pour certaines dates spécifiques. Par exemple, je veux désactiver 09h00 le 29/03/2022 et 10h le 30/03/2022.

Avez-vous une idée de la façon dont je peux réaliser cela ?

Voici mon code actuel, point positif mon calendrier fonctionne parfaitement :

Code html :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" />
 
  <script data-require="jquery@*" data-semver="3.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
 
 
<form name="str" method="POST" action="test.php" id="userForm">
<input id="datetimepicker" type="text" step="30" name="creneau_horaire">
<input type="submit">
</form>
 
<script type="text/javascript">
  
var minDateTime =  new Date();
minDateTime.setHours(minDateTime.getHours()-1);
 
var currentDate = new Date(new Date().getTime() + 60 * 60 * 1000);
    
jQuery(document).ready(function() {
    jQuery.datetimepicker.setLocale('fr');
    })
    ;
 
 
    $(document).ready(function() {
 
      var myFormatter = {
        parseDate: function(vDate, vFormat) {
          return moment(vDate, vFormat).toDate();
        },
        guessDate: function(vDateStr, vFormat) {
          return moment(vDateStr, vFormat).toDate();
        },
        parseFormat: function(vChar, vDate) {
          return vDate; // date string (I guess)
 
        },
        formatDate: function(vChar, vDate) {
          var res = moment(vChar).format(vDate);
          return res;
        },
 
      };
 
      jQuery.datetimepicker.setDateFormatter(myFormatter);
 
 
var specificDates = ['29/03/2022','30/03/2022'];
 
var hoursToTakeAway = [[09,10],[10]];
 
      jQuery('#datetimepicker').datetimepicker({
        timepicker: true,
        inline:true,
onGenerate:function(ct,$i){
          var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
                  $('.xdsoft_time_variant .xdsoft_time').show();
          if(ind !== -1) {
              $('.xdsoft_time_variant .xdsoft_time').each(function(index){
                  if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1){
                                  
                                  $(this).hide();   
                                  
                  //$(this).addClass('disabled');
                  //$(this).fadeTo("fast",.3);
                  //$(this).prop('disabled',true);
                  }
              });
          }
        },
        allowTimes:[
          '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
         ],
        yearStart: 2022,
        yearEnd: new Date().getFullYear() + 1,
         beforeShowDay: function(date) {
       var show = true;
       if(date.getDay()==6||date.getDay()==0) show=false
       return [show];
    },
        value: currentDate,
        defaultDate: currentDate,
        defaultTime: minDateTime.getHours() + ":" + minDateTime.getMinutes(),
        /*
        -- datetimepicker default formating - when PHP date formatter is used --
          format: "d/m/Y H:i:s",
          formatTime: "H:i",
          formatDate: "d/m/Y",
        */
 
        format: "DD/MM/YYYY à H:mm",
        formatTime: 'H:mm',
        formatDate: 'DD/MM/YYYY', //I need to use this format, but it works only when using "d/m/Y" - so somewhere the php date formater is still used..
        
      });
 
    });
</script>

Cette partie de code :

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
var specificDates = ['29/03/2022','30/03/2022'];
var hoursToTakeAway = [[09,10],[10]];
 
onGenerate:function(ct,$i){
          var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
		  $('.xdsoft_time_variant .xdsoft_time').show();
          if(ind !== -1) {
              $('.xdsoft_time_variant .xdsoft_time').each(function(index){
                  if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1){
 
				  $(this).hide();   
 
                  //$(this).addClass('disabled');
                  //$(this).fadeTo("fast",.3);
                  //$(this).prop('disabled',true);
                  }
              });
          }
        }

fonctionne d'après certains membres de ce topic, mais j'ai beau analysé dans tous les sens ça ne fonctionne pas pour moi : https://stackoverflow.com/questions/...r-disable-time

Merci d'avance,

Cordialement

[SpaceFrog]

La doc parle de désactivation de dates
https://xdsoft.net/jqplugins/datetim...#disabledDates

Pas sur que ce soit possible pour des heures ...

[Saturos2k4]

Bonjour @spacefrog, effectivement la doc n'en parle pas, mais certaines personnes ont trouvé la feinte avec onGenerate (voir topic : https://stackoverflow.com/questions/...r-disable-time )

Pour eux cela fonctionne.

[Saturos2k4]

Résolu ! dateFormat ne fonctionnait pas, d'où l'utilisation de momentjs.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
onGenerate: function(ct,$i) {
    var ind = specificDates.indexOf(moment(ct).format('DD/MM/YYYY'));
    $('.xdsoft_time_variant .xdsoft_time').show();
 
    if(ind !== -1) {
        $('.xdsoft_time_variant .xdsoft_time').each(function(index){
            if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1) {
                $(this).addClass('xdsoft_disabled');
            }
        });
    }
}