Propriété CSS sur un datepicker JQUERY

**legrandse** · 11/01/2019, 14h06

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>

**legrandse** · 11/01/2019, 14h57

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

Code HTML :

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

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 :

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

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

et pour ui-state-default:

Code :

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

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.

**NoSmoking** · 12/01/2019, 10h02

Bonjour,
je ne vois pas pourquoi

Code :

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

1
2
3
.isActived  {
  pointer-events: none;
}

ne fonctionnerait pas, tu testes sous quel navigateur ?

Propriété CSS sur un datepicker JQUERY

CSS

Discussions similaires

Partager

Partager