Estoy usando el jQuery DatePicker de control por primera vez. Tengo que trabajar en mi formulario, pero es dos veces tan grande como me gustaría, y alrededor de 1,5 veces tan grande como la demostración en el jQuery interfaz de usuario de la página. Hay alguna configuración sencilla que me falta para controlar el tamaño?

Edición: he encontrado una pista, pero abre nuevos problemas. En el archivo CSS, indica que el componente se escala de acuerdo con el elemento primario del tamaño de la fuente. Se recomienda la configuración de

body {font-size: 62.5%;}

para hacer 1em = 10px. Haciendo esto me da un buen tamaño de selector de fecha, pero obviamente se echaría a perder el resto de mi sitio web (actualmente tengo font-size: .9em).

Traté de tirar de un DIV alrededor de mi cuadro de texto y la configuración de su tamaño de la fuente, pero parece ignorar que. Así que debe haber alguna forma para reducir el datepicker por cambiar la fuente de su padre, pero, ¿cómo puedo hacerlo sin estropear el resto de mi sitio web?

  • pegar el código de seguridad, porque sé que no hay razón por la que sería más grande? y son la referencia para el botón de la imagen o el actual calendario que muestra los días?
  • Me he dado cuenta de que el selector de fecha HTML será insertado fuera de cualquier div contenedor. Es por eso que ajuste el tamaño de la fuente de su div no hacerlo (aparte del hecho de que la declaración de estilo necesarias para ser más específico, como en Jimmy Stenke la respuesta).
InformationsquelleAutor gfrizzle | 2009-03-18

23 Comentarios

  1. 389

    Usted no tiene que cambiar en el jquery-ui css archivo (puede ser confuso si cambia el valor predeterminado de archivos), es suficiente si se agrega

    div.ui-datepicker{
     font-size:10px;
    }

    a una hoja de estilo cargado después de la interfaz de usuario de archivos de

    div.ui datepicker se necesita en caso de ui-widget es mencionado después de la ui datepicker en la declaración

    • «En una hoja de estilos carga después de la interfaz de usuario de archivos» paso es muy importante. Si usted carga su hoja de estilo antes de que la interfaz de usuario jquery hoja de estilos, alguno de los atributos que se pueden sobrescribir.
    • dónde está el ‘div’ de ?
    • Para detener el sobrescrito problema como por comentario 1 – usted puede hacer esto: font-size:10px !importante;
    • !importante es hack-ish, me gustaría definitivamente aconsejan contra usar que.
    • Esta es la razón por la que son llamados Hojas de Estilo en CASCADA (CSS)
    • lol no se dan cuenta que el problema puede ser el tamaño de fuente! gracias
    • Millones De Dólares Contesta El Hombre 🙂
    • Gran Respuesta…
    • He añadido tu sugerencia en la última línea de la jquery-ui.css archivo en lugar de crear una hoja de estilo y, a continuación, tener que recordar a agregar a cada página web.
    • thx por mencionar el orden de carga de los archivos css.

  2. 30

    No puedo agregar un comentario, así que esto es en referencia a la aceptación de respuesta por Keijro. He añadido lo siguiente a mi hoja de estilos lugar:

        div.ui-datepicker {
        font-size: 62.5%;
    }

    y funcionó así. Este podría ser preferible el valor absoluto de 10px.

  3. 20

    No está seguro de si el cuerpo ha sugerido la siguiente manera, si si, solo ignoren mis comentarios. He probado hoy y funciona para mí. Con sólo cambiar el tamaño de la fuente antes de que el control se muestra:

    $('#event_date').datepicker({
        showButtonPanel: true,
        dateFormat: "mm/dd/yy",
        beforeShow: function(){    
               $(".ui-datepicker").css('font-size', 12) 
        }
    });

    El uso de la función de devolución de llamada beforeShow

    • Me gusta esta solución mejor
  4. 9

    Puedo cambiar la siguiente línea en la interfaz de usuario.tema.css:

    .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

    a:

    .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
  5. 5

    Agregar

    div.ui-datepicker, .ui-datepicker td{
     font-size:10px;
    }

    a una hoja de estilo cargado después de la interfaz de usuario de archivos.
    Esto también va a cambiar el tamaño de la fecha de elementos.

  6. 5

    Para mí, esta fue la solución más fácil:
    He añadido el font-size:62.5%; a la primera .ui-datepicker etiqueta en el jquery css personalizado de archivo:

    antes:

    .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;} 

    después:

    .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
  7. 4

    Yo estaba tratando de estos ejemplos, sin éxito. Al parecer, otras hojas de estilo en la página se ajuste predeterminado tamaños de fuente para diferentes etiquetas. Si el ajuste de la interfaz de usuario datepicker que están cambiando de un div. Si usted cambia de un div que usted necesita para asegurarse de que el contenido de ese div heredar ese tamaño. Esto es lo que finalmente se trabajó para mí:

    <style type="text/css">
    .ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
    div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
    .ui-datepicker-title span{font-size:16px;}
    </style>

    Buena suerte!

  8. 2

    Yo estaba usando una entrada de recoger y mostrar el calendario, y ser capaz de cambiar el tamaño del calendario que he estado usando este código:

    div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

    Funciona como un encanto.

  9. 1

    Esto funcionó para mí y parece simple…

    $(function() {
      $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
    });
    
    <div style="font-size:75%";>
    <div id="inlineDatepicker"></div>
    </div>
  10. 1
    with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:
    
    
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Icon trigger</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style type="text/css">
    .ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
    </style>
    
    <script>
    
    
    
    $(function() {
    
    $( "#datepicker" ).datepicker({
    //font-size:10px;
     //numberOfMonths: 3,
    
    showButtonPanel: true,
    showOn: 'button',
    buttonImage: "images/calendar1.gif",
    buttonImageOnly: true
    });
    });
    </script>
    
    </head>
  11. 1

    He probado el enfoque de la utilización de la función de devolución de llamada beforeShow sino que debía también se establece la altura de la línea. Mi versión era algo así:

    beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
  12. 1

    el mejor lugar para cambiar el tamaño del calendario en el archivo de jquery-ui.css

    /* Component containers
    ----------------------------------*/
    .ui-widget {
        font-family: Verdana,Arial,sans-serif;
        font-size: .7em; /* <--default is 1.1em */
    }
  13. 1

    Este código funcionará en el Calendario de los botones.
    tamaño de los números va a aumentar por el uso de «line-height».

    /* Change Size */
    <style>
        .ui-datepicker{
            font-size:16px;
            line-height: 1.3;
        }
    </style>
  14. 1

    puede cambiar de jquery-ui-1.10.4.personalizado.css de la siguiente manera

    .ui-widget
    {
        font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
        font-size: 0.6em;
    }
  15. 1

    Otro enfoque:

    $('.your-container').datepicker({
        beforeShow: function(input, datepickerInstance) {
            datepickerInstance.dpDiv.css('font-size', '11px');
        }
    });
  16. 1

    Jacob Tsui solución funciona perfecto para mí:

    $('#event_date').datepicker({
        showButtonPanel: true,
        dateFormat: "mm/dd/yy",
        beforeShow: function(){ 
            $(".ui-datepicker").css('font-size', 12)
        }
    });
  17. 1

    Se puede alterar en el default ‘jquery-ui.css‘ archivo como a continuación se indica el código:

    div.ui-datepicker {
    font-size: 80%; 
    }

    Sin embargo, si cambia el valor predeterminado ‘jquery-ui.css‘ archivo no se recomienda, ya que podría haber sido utilizado en otro lugar del proyecto. El cambio de valores en el archivo predeterminado puede alterar el selector de fecha de fuente en otras páginas web donde se ha utilizado.

    He utilizado el código de abajo para alterar «font-size». Me coloqué justo después de datepicker() se llama como se muestra a continuación.

    <script>
            $(function () {
                $( "#datepicker" ).datepicker();
                $("div.ui-datepicker").css("font-size", "80%")
            });
    </script>

    Espero que esto ayude…

  18. 0

    Creo que me he encontrado es – tuve que ir en el archivo CSS y cambiar el tamaño de fuente para el datepicker de control directamente. Obvio una vez que se sabe sobre él, pero confuso al principio.

    • pegar tu código css.
  19. 0

    abrir la interfaz de usuario.todos.css

    al final poner

    @import "ui.base.css";
    @import "ui.theme.css";
    
    div.ui-datepicker {
    font-size: 62.5%; 
    }

    y listo !

  20. 0

    Para conseguir que esto funcione en Safari 5.1 con Rails 3.1, he tenido que añadir:

    .ui-datepicker, .ui-datepicker a{
     font-size:10px;
    }
  21. 0

    Me había datepicker que aparecen en un modal y debido a la «date-display-contenedor» en el lado izquierdo, el calendario fue parcialmente fuera de la vista, por lo que añadió:

    .datepicker-date-display {
      display: none;
    }
    
    .datepicker-calendar-container {
      max-height: 21em;
    }
    .datepicker-day-button {
      line-height: 1.2em;
    }
    
    .datepicker-table > thead > tr > th {
      padding: 0;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here