Propriété CSS sur un datepicker JQUERY

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:

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:

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:

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>

on remarque que chaque dates concernées se présente comment ceci par exemple pour le 23 janvier :

Code:

1
2
3
<td class="isActived" data-handler="selectDay" data-event="click" data-month="0" data-year="2019">
<a class="ui-state-default" href="#">23</a>
</td>

Le css pour isActived:

Code:

1
2
3
4
5
6
.isActived {
 
    background: #ff0000;
    color: #454545;
    pointer-events: none;
}

et pour ui-state-default:

Code:

1
2
3
4
5
6
7
.ui-state-default, .ui-widget-content .ui-state-default{
 
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

Je ne vois pas comment faire.

Bonjour,
je ne vois pas pourquoi
Code:

1 2 3 .isActived { pointer-events: none; }
ne fonctionnerait pas, tu testes sous quel navigateur ?