Discussion :

[legrandse]

Bonjour à tous,


J'ai un soucis dans mon datepicker.

la propriété "BeforeShowDay" me permet d'afficher des événements issus d'une BDD avec notamment un style CSS propre via

Code :

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

events = [true,'isActived']

Cela fonctionne très bien ... sur PC car sur un mobile c'est problématique et voici pourquoi.

mon CSS me colorie les événements et empêche de cliquer dessus via ces propriétés:

Code css :

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

1
2
3
4
5
6
.isActived a.ui-state-default{
	background:url(../icons/fm.png);
	background-repeat:repeat-x;
	background-color:#f6f6f6;
	cursor: not-allowed;
}

oui mais sur un écran tactile, le "cursor: not-allowed" ne sert à rien car l'on peut tout de même cliquer sur l'événement.

Je ne peux pas utiliser cette version

Code :

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

events = [false,'']

Comment puis-je faire dans ce cas ?

Merci pour votre aide

voici mon 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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<script>
  var activeDays = <?php echo json_encode($activeDays); ?>;
  //var activeDays = ["7-6-2018", "7-7-2018", "7-8-2018", "7-12-2018", "7-13-2018", "7-14-2018"]; 
  var arrival = <?php echo json_encode($arrayArrival); ?>;
  //var arrival = ["7-6-2018", "7-12-2018"];
  var departure = <?php echo json_encode($arrayDeparture); ?>;
 //var departure = ["2018-10-18", "2018-10-11"];
 
 
 
  $( function() {
    var dateFormat = "dd/mm/yy",
      from = $( "#from" )
        .datepicker({
		  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" ],
		  dateFormat : "dd/mm/yy",
          changeMonth: true,
          numberOfMonths: 3,
		  beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
            var n = [];
            departure.forEach(function(item){
  		    n.push((new Date(item)).getDay());
	        });
 
 
			if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [true,'isActived'];
			}
 
			if ( arrival.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedArrival'];
			}
			if ( departure.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedDeparture'];
			}
            if (departure.indexOf(currentdate)  > -1 && n.indexOf(0) > -1)
			{
				events = [true, 'isActivedDepartureSun'];
			}
 
			if ( arrival.indexOf(currentdate) > -1 && departure.indexOf(currentdate) >-1) 
			{
                events = [true,'isActivedEqual'];
			}
 
 
 
            return events;
        }
 
 
 
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
		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" ],
		dateFormat : "dd/mm/yy",
        changeMonth: true,
        numberOfMonths: 3,
		beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
            var n = [];
            departure.forEach(function(item){
  		    n.push((new Date(item)).getDay());
	        });
 
			//var sun = getDay(currentdate);		
 
			if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [true,'isActived'];
			}
 
			if ( arrival.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedArrival'];
			}
			if ( departure.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedDeparture'];
			}
            if (departure.indexOf(currentdate)  > -1 && n.indexOf(0) > -1)
			{
				events = [true, 'isActivedDepartureSun'];
			}
 
			if ( arrival.indexOf(currentdate) > -1 && departure.indexOf(currentdate) >-1) 
			{
                events = [true,'isActivedEqual'];
			}
 
            return events;
        }
 
 
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>

[legrandse]

mon problème serait-il donc sans issue ?

Une autre piste:

Code :

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

1
2
3
4
if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [false,'isActived'];
			}

Le fait de passer à FALSE "grise" les dates concernées mais ne semble pas appliquer une règle CSS non plus.

Y a-t-il tout de même moyen de modifier l'apparence en CSS ?

Merci pour votre aide

[NoSmoking]

Bonjour,
pas tout regardé mais concernant

oui mais sur un écran tactile, le "cursor: not-allowed" ne sert à rien car l'on peut tout de même cliquer sur l'événement.

La propriété cursor ne fait que changer l'apparence du curseur, rien de plus.

As tu essayé la déclaration CSS pointer-events: none sur tes éléments ?

[legrandse]

Merci pour l'aide.

J'ai essayé mais cela ne fonctionne pas en utilisant un datepicker.