Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre régulier Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    258
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 258
    Points : 115
    Points
    115

    Par défaut 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 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>

  2. #2
    Membre régulier Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    258
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 258
    Points : 115
    Points
    115

    Par défaut

    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.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 584
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 584
    Points : 33 196
    Points
    33 196

    Par défaut

    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 ?

Discussions similaires

  1. Problème de CSS sur un plugin jQuery
    Par abc.xyz dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 15/06/2015, 15h14
  2. Utilisation des propriétés CSS de menu sur des images
    Par stefsas dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 08/05/2010, 20h18
  3. Réponses: 3
    Dernier message: 11/05/2009, 23h34
  4. transparence mais pas sur toutes les propriétés CSS
    Par Nixar dans le forum Mise en page CSS
    Réponses: 17
    Dernier message: 31/12/2007, 19h30
  5. Changer une propriété css d'un div en cliquant sur un lien
    Par Le Mage Noir dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 26/01/2006, 15h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo