IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Taille de la popup de datepicker


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2010
    Messages
    122
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 122
    Par défaut Taille de la popup de datepicker
    Bonjour,

    J'utilise datepicker associé à un champ input et je voudrais changer la taille de la popup qui s'affiche (avec les jours du mois) quand on clique dans le champ. Comment fait-on ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    $('#plage_1_1').datepicker();
    <input type='text' id='plage_1_2'>
    Merci (nouveau en JQuery...)

    JP

  2. #2
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Simple : personnalise ton datepicker en utilisant le css.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2010
    Messages
    122
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 122
    Par défaut
    Si je comprends bien ce que tu me dis, je fais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('#plage_1_1').css('width','150px');
    ca a pour effet de mettre la taille de 150px au champ input alors que ce que je veux c'est changer la taille de la fenêtre qui s'affiche en popup avec les dates.

    Peux-tu me préciser ?

    Merci

  4. #4
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    Pourquoi appliquer le style via jquery ? Utilise directement une feuille de style que tu inclus après celle du datepicker bien entendu, ce sera beaucoup plus simple.

    Ce qu'il faut que tu fasses, c'est que tu inspectes les sources de ton site, et il faut que tu indiques des styles pour les classes du datepicker (qui commence toutes par .ui-datepicker...).

    En gros, c'est un truc dans le genre (me rappel plus de la classe exacte) qu'il faut que tu écrives :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .ui-datepicker-calendar {
        width : 300px;
        height : 250px;
    }

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2010
    Messages
    122
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 122
    Par défaut
    Je suis allé voir le css de jquery-ui et effectivement je tombe au beau milieu du css sur :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .ui-datepicker {
    	width: 17em;
    	padding: .2em .2em 0;
    	display: none;
    }

    je rajoute donc mon propre css avec :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <style type='text/css'>.ui-datepicker {width: 13em;}</style>

    ce qui a bien pour effet de surcharger la valeur de width. Ca marche mais franchement je trouve bizarre qu'il faille aller foiner dans du code pour deviner l'attribut à changer et qu'on ne puisse pas faire ça avec une interface bien définie...

    En tous cas le principal c'est que ça marche donc merci à toi Spartacusply

    JP

  6. #6
    Membre Expert

    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Par défaut
    C'est bien comme ça qu'il faille faire.

    Pour info, il est possible de débugguer du Html/CSS (et javascript en l'occurence) grâce aux consoles qui sont intégrés sur les différents navigateurs : pour y accéder il suffit d'appuyer sur la touche F12 de ton clavier. Il existe aussi l'excellente extension firebug sous firefox qui est sans doute le meilleur allié du développeur web.

Discussions similaires

  1. Taille d'un popup qui s'adapte automatiquement au contenu
    Par Shinoda00 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/03/2009, 22h42
  2. modifier la taille d une popup
    Par nouida dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 21/06/2007, 11h05
  3. [ popup ] maximiser la taille d'une fenetre dès le début
    Par sleepy2002 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 26/10/2005, 10h19
  4. [PHP-JS] Affichage d'une image dans une popup à la taille
    Par urbanspike dans le forum Langage
    Réponses: 3
    Dernier message: 27/09/2005, 20h53
  5. taille popup
    Par Anduriel dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 30/05/2005, 19h14

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