Como redimensionar o controle jQuery DatePicker

195

Estou usando o controle jQuery DatePicker pela primeira vez. Eu já trabalhei no meu formulário, mas tem o dobro do tamanho que eu gostaria e cerca de 1,5 vezes o tamanho da demonstração na página da interface do usuário do jQuery. Falta alguma configuração simples para controlar o tamanho?

Edit: Encontrei uma pista, mas abre novos problemas. No arquivo CSS, ele afirma que o componente será escalado de acordo com o tamanho da fonte do elemento pai. Eles recomendam a configuração

body {font-size: 62.5%;}

para fazer 1em = 10px. Fazer isso me dá um datepicker de bom tamanho, mas obviamente atrapalha o resto do meu site (atualmente tenho o tamanho da fonte: .9em).

Tentei jogar um DIV em torno da minha caixa de texto e definir o tamanho da fonte, mas parece ignorá-lo. Portanto, deve haver uma maneira de reduzir o datepicker alterando a fonte do pai, mas como faço isso sem atrapalhar o resto do meu site?

jquery-ui 
— gfrizzle
fonte
cole seu código, porque não sei por que seria maior? e você está se referindo ao botão de imagem ou ao calendário real que mostra os dias?
— TStamper 18/03/09
Notei que o HTML do datepicker será inserido fora de qualquer div que contém. É por isso que definir o tamanho da fonte da sua div não foi o suficiente (além do fato de que a declaração de estilo precisava ser mais específica, como na resposta de Jimmy Stenke).
— precisa saber é o seguinte

Respostas:

390

Você não precisa alterá-lo no arquivo jquery-ui css (pode ser confuso se você alterar os arquivos padrão), basta adicionar

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

em uma folha de estilo carregada após os arquivos da interface do usuário

div.ui-datepicker é necessário caso o ui-widget seja mencionado após ui-datepicker na declaração

— Jimmy Stenke
fonte
26
A etapa "em uma folha de estilo carregada após os arquivos da interface do usuário" é muito importante. Se você carregar sua folha de estilo antes da folha de estilo jquery ui, quaisquer atributos que você definir serão substituídos.
— 314 Travis Travis
7
Para interromper o problema sobrescrito conforme o comentário 1 - você pode fazer isso: font-size: 10px! Important;
— Martin
7
importante é hack-ish, eu definitivamente desaconselharia usar isso.
— Derek Adair
5
É por isso que eles são chamados de folhas de estilo CASCADING (CSS) #
— Mark W
1
lol nem percebeu que o problema poderia ser o tamanho da fonte! obrigado
— themhz
30

Não posso adicionar um comentário, portanto isso se refere à resposta aceita por Keijro. Na verdade, adicionei o seguinte à minha folha de estilo:

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

e funcionou também. Isso pode ser preferível ao valor absoluto de 10px.

— Bryant Bowman
fonte
20

Não tenho certeza se algum corpo sugeriu a seguinte maneira, se sim, apenas ignore meus comentários. Eu testei isso hoje e funciona para mim. Apenas redimensionando a fonte antes que o controle seja exibido:

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

Usando a função de retorno de chamada beforeShow

— Jacob CUI
fonte
2
Eu gosto mais desta solução #
— Code Monkey
9

Altero a seguinte linha no ui.theme.css:

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

para:

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

Adicionar

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

em uma folha de estilo carregada após os arquivos da interface do usuário. Isso também redimensionará os itens de data.

— Satyaram BV
fonte
5

Para mim, essa foi a solução mais fácil: eu adicionei font-size:62.5%;a primeira .ui-datepickertag no arquivo css customizado do jquery:

antes:

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

depois de:

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

Eu estava tentando esses exemplos sem sucesso. Aparentemente, outras folhas de estilo da página estavam definindo tamanhos de fonte padrão para diferentes tags. Se você ajustar o ui-datepicker, estará alterando uma div. Se você alterar uma div, precisará certificar-se de que o conteúdo dessa div herda esse tamanho. Isto é o que finalmente funcionou para mim:

<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>

Boa sorte!

— Chad Kuehn
fonte
2

Eu estava usando uma entrada para coletar e mostrar o calendário e, para poder redimensionar o calendário, tenho usado este código:

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

Ele funciona como um encanto.

— Chris
fonte
1

Isso funcionou para mim e parece simples ...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
— jimscafe
fonte
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>
— babbu
fonte
1

Tentei a abordagem de usar a função de retorno de chamada antes do show, mas descobri que também precisava definir a altura da linha. Minha versão parecia:

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

o melhor lugar para alterar o tamanho do calendário é no arquivo jquery-ui.css

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

Este código funcionará nos botões do Calendário. o tamanho dos números aumentará usando "altura da linha".

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

você pode alterar o jquery-ui-1.10.4.custom.css da seguinte maneira

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

Outra abordagem:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); trabalhar se chamamos depois $("#DueDate").datepicker();

Violino

— Mostafa
fonte
1

A solução Jacob Tsui funciona perfeitamente para mim:

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

Podemos alterar no arquivo padrão ' jquery-ui.css ' como abaixo do código fornecido:

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

No entanto, alterando o padrão ' jquery-ui.css arquivo ' não é recomendado, pois pode ter sido usado em outro lugar do projeto. A alteração de valores no arquivo padrão pode alterar a fonte datepicker em outras páginas da web em que foi usada.

Eu usei o código abaixo para alterar "tamanho da fonte". Coloquei-o logo após o datepicker () ser chamado, como mostrado abaixo.

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

Espero que isto ajude...

— user3401675
fonte
0

Acho que encontrei - tive que entrar no arquivo CSS e alterar diretamente o tamanho da fonte do controle datepicker. Óbvio quando você souber, mas confuso no começo.

— gfrizzle
fonte
0

abra ui.all.css

no final colocar

@import "ui.base.css";
@import "ui.theme.css";

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

e ir !

0

Para que isso funcionasse no Safari 5.1 com o Rails 3.1, tive que adicionar:

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
— Argila
fonte
0

Eu tinha o datepicker aparecendo em um modal e, devido ao "contêiner de exibição de data" no lado esquerdo, o calendário estava parcialmente fora de vista, então adicionei: 

.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;
}
— Mac
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.