Bonjour à tous,

Je souhaiterais appliquer la propriété pointer-events: none; dans mon CSS qui met en page un datepicker Jquery

mon CSS est relativement simple :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
.isActived .ui-state-default   {
 
	background: #ff0000;
	color: #454545;
	pointer-events: none;
 
}
sauf que pointer-events: none; ne fonctionne pas car je sais toujours cliquer sur l'une des dates qui devraient en principe ne pas s'afficher dans le champs <input type="text" id="datepicker">.
Par contre en faisant un:
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
.isActived .ui-state-default:active  {
 
	background: #ff0000;
	color: #454545;
	pointer-events: none;
 
}
Dans ce cas le blocage fonctionne bien car le champs <input type="text" id="datepicker"> reste vide mais l'affichage est mauvais.
C'est le fond gris des cases dates qui se trouve en premier plan et c'est seulement quand je clique sur l'une des date bloquées que le fond rouge apparaît.

Pouvez-vous m'aider pour afficher le fond rouge en premier plan ?

Merci pour votre aide

Voici mon code complet pour les tests éventuels:
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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  //var activeDays = <?php echo json_encode($activeDays); ?>;
  //var arrival = <?php echo json_encode($arrayArrival); ?>;
  //var departure = <?php echo json_encode($arrayDeparture); ?>;
  //var depSunday = <?php echo json_encode($arrayDepartureSun); ?>;
 
  var activeDays = ["2019-1-15", "2019-1-16", "2019-1-17", "2019-1-19","2019-1-20", "2019-1-22", "2019-1-23","2019-1-24"]; 
  
  
  
  $( function() {
        
    $( "#datepicker" ).datepicker({ 
     firstDay: 1,
     dateFormat : "dd/mm/yy",
     firstDay: 1,       
          dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
                  monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre" ],
                  monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aout", "Sep", "Oct", "Nov", "Déc" ], 
          
                  beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
                        var d = date.getDate();
                        var y = date.getFullYear();
                        var currentdate = y + '-' + (m+1) + '-' + d ;
                                                
                        
                                
                        
                        if ( activeDays.indexOf(currentdate)  > -1)  
                    {
                        events = [true,'isActived'];
                                }
                        
                        
                                
                                
                                        
                        return events;
                        }
                                
    
    });
    
  
  } );
  </script>
<style>
.isActived .ui-state-default   {
        
        /*background: url('icons/fd.png');*/
        background: #ff0000;
        color: #454545;
        pointer-events: none;
        
}
 
        
</style>
 
 
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>