Como personalizar e temas jQuery UI Datepicker

O jQuery UI é simplesmente incrível e, devido à facilidade de uso, é popular e amplamente usado em quase todos os sites que precisam de recursos interativos..

E, neste post, vamos ver um dos recursos fornecidos, o widget DatePicker.

Vamos tentar aprender como personalizar o tema do calendário, para que você possa criar seu próprio tema que corresponda ao seu design geral. No entanto, você precisa de um pouco de compreensão em JavaScript e familiaridade com o CSS antes de seguir este tutorial.

Demonstração
Fonte de download

Se você estiver pronto, vamos começar.

Os ativos

Vamos preparar alguns dos ativos essenciais para o calendário.

Primeiro, o design do calendário se referirá a esse arquivo PSD da Premium Pixels. Então é melhor baixarmos primeiro para nos ajudar a tirar uma amostra das cores que precisamos. Então, baixe dois padrões de Sutil Padrões que usaremos como plano de fundo do nosso calendário. Neste exemplo, decidimos usar os seguintes padrões: denim preto e couro escuro.

Também precisaremos de uma ferramenta de desenvolvimento web como o Firebug para inspecionar classes / ids de elemento gerados pela interface do usuário do jQuery.

Bem, acho que já tivemos preparação suficiente. Agora vamos ao primeiro passo.

Etapa 1: jQuery UI Datepicker

Primeiro, vá para a página de download da jQuery UI. Nesta página você será presenteado com algumas opções, como segue; o núcleo da interface do usuário, widgets, interações e efeitos.

Deveríamos desmarque todos os componentes, como não precisamos de todos eles.

Então, no Widgets seção selecione apenas o datepicker. A interface do usuário do jQuery selecionará as dependências essenciais automaticamente e, em seguida, baixar o arquivo.

Vincular todos os arquivos baixados - exceto o CSS - para o seu documento em branco HTML, da seguinte forma:

Etapa 2: Personalizando o DatePicker

Nesta etapa, vamos configurar um datepicker com as seguintes opções.

O código acima instruirá o jQuery a exibir o calendário em um elemento com datepicker identidade. Então, precisamos colocar o seguinte div tag with - datepicker ID - na seção do corpo para formar o calendário:

Agora o calendário já deveria ter sido gerado e aparecer assim, simples sem qualquer estilo, mas ainda tem a funcionalidade.

Etapa 3: os estilos

Agora vamos começar a estilizar o calendário. Começaremos normalizando todos os elementos - como sempre - e criando uma nova folha de estilo, neste exemplo eu a nomeio datepicker.css. Em seguida, vincule todos eles ao documento HTML.

Então, vamos primeiro anexar um fundo ao corpo para que o nosso HTML não pareça muito claro.

body background: url ('… /img/darkdenim3.png') repita 0 0 # 555;

Em seguida, vamos especificar a largura do separador de data, posicioná-lo no centro e adicionar sombra projetada para dar o efeito proeminente ao calendário.

.ui-datepicker width: 216px; altura: auto; margin: 5px auto 0; fonte: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 0,5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 0,5); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 0,5);

Também removeremos a decoração de sublinhado padrão de todas as tags de âncora.

.ui-datepicker a text-decoration: nenhum;

O calendário na jQuery UI é formado com um mesa. Então, vamos adicionar 100% largura para o mesa, por isso, terá a mesma largura máxima que o invólucro acima; isso é 216 px

.tabela ui-datepicker width: 100%;

Estilizando a seção de cabeçalho

O datepicker tem uma seção de cabeçalho contendo Mês ano do calendário. Esta seção terá a textura de couro escura que baixamos anteriormente com cor de fonte ligeiramente branca e 1px sombra branca no topo.

.ui-datepicker-header background: url ('… /img/dark_leather.png') repita 0 0 # 000; cor: # e0e0e0; intensidade da fonte: Negrito; -webkit-box-shadow: inserção 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inserção 0px 1px 1px 0px rgba (250, 250, 250, 0,2); box-shadow: inserção 0px 1px 1px 0px rgba (250, 250, 250, 0,2); text-shadow: 1px -1px 0px # 000; filter: dropshadow (cor = # 000, offx = 1, offy = -1); altura da linha: 30px; largura da borda: 1px 0 0 0; estilo de borda: sólido; border-color: # 111;

Em seguida, vamos centralizar o Mês posição.

 .ui-datepicker-title text-align: center;

Substitua o Próximo e Anterior texto com as imagens de flecha de sprite cortadas do PSD.

.ui-datepicker-prev, .ui-datepicker-next exibição: inline-block; largura: 30px; altura: 30px; texto-alinhar: centro; cursor: ponteiro; background-image: url ('… /img/arrow.png'); repetição de fundo: sem repetição; altura da linha: 600%; estouro: oculto;

Em seguida, ajuste a posição da seta respectivamente.

.ui-datepicker-prev float: left; posição de fundo: centro -30px;  .ui-datepicker-next float: right; posição de fundo: centro 0px;

Enquanto o nomes do dia seção é embrulhado dentro de um cabeça, com base em nossa referência de design, ele terá um gradiente ligeiramente branco. E, para simplificar nossa tarefa, usaremos essa ferramenta para gerar o código de gradiente:

.ui-datepicker thead background-color: # f7f7f7; background-image: -moz-linear-gradient (superior, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # f7f7f7), cor-stop (100%, # f1f1f1)); background-image: -webkit-linear-gradient (superior, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linear-gradiente (superior, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradiente (superior, # f7f7f7 0%, # f1f1f1 100%); background-image: gradiente linear (top, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px sólido #bbb;

o nomes do dia texto terá a cor cinza escuro de # 666666 e eles também terão um branco fino text-shadow para dar o efeito pressionado.

.ui-datepicker th text-transform: maiúscula; tamanho da fonte: 6pt; preenchimento: 5px 0; cor: # 666666; text-shadow: 1px 0px 0px #fff; filter: dropshadow (cor = # fff, offx = 1, offy = 0);

Neste ponto, o calendário aparecerá assim:

Estilizando as datas

As datas do calendário são agrupadas td ou dados da tabela. Então, vamos definir o preenchimento para 0 para remover os espaços entre o td e dê uma borda direita de 1px.

.ui-datepicker tbody td preenchimento: 0; borda direita: 1px sólido #bbb;

Exceto pela última td, que não terá borda direita. Nós definimos a borda direita para 0 para este.

.ui-datepicker tbody td: último filho border-right: 0px;

A linha da tabela será quase a mesma. Ele terá um fundo de borda de 1px, exceto a última linha.

.ui-datepicker tbody tr borda inferior: 1px sólida #bbb;  .ui-datepicker tbody tr: último filho border-bottom: 0px;

Estilizando o padrão, o foco e o estado ativo

Nesta etapa, definiremos o hover da data e os estilos ativos. Primeiro, definiremos o estado padrão da data especificando a dimensão; centre a posição do texto da data, adicione a cor do gradiente e a sombra branca interna.

.ui-datepicker td span, .ui-datepicker td a exibição: inline-block; intensidade da fonte: Negrito; texto-alinhar: centro; largura: 30px; altura: 30px; altura da linha: 30px; cor: # 666666; text-shadow: 1px 1px 0px #fff; filter: dropshadow (cor = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; background: -moz-linear-gradient (superior, #ededed 0%, #dedede 100%); background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # ededed), cor-stop (100%, # dedede)); background: -webkit-linear-gradient (top, #ededed 0%, # dedede 100%); background: -o-linear-gradiente (top, #ededed 0%, # dedede 100%); background: -ms-linear-gradient (superior, #ededed 0%, # dedede 100%); background: gradiente linear (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inserção 1px 1px 0px 0px rgba (250, 250, 250, 0,5); -moz-box-shadow: inserção 1px 1px 0px 0px rgba (250, 250, 250, 0,5); box-shadow: inserção 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unelectable .ui-state-default segundo plano: # f4f4f4; cor: # b4b3b3;

Quando você passa o mouse sobre a data, ela fica ligeiramente branca.

 .ui-datepicker-calendar .ui-state-hover segundo plano: # f7f7f7;

Quando a data está em um estado ativo, ela terá os seguintes estilos.

 .ui-datepicker-calendar .ui-state-active segundo plano: # 6eafbf; -webkit-box-shadow: inserção 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inserção 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: inserção 0px 0px 10px 0px rgba (0, 0, 0, 1); cor: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filter: dropshadow (cor = # 4d7a85, offx = 0, offy = 1); borda: 1px sólido # 55838f; posição: relativa; margem: -1px;

Agora, o calendário deve ficar muito melhor.

Corrigindo a posição

Neste ponto, olhe a data cuidadosamente. Ao clicar na data na primeira ou na última coluna, você notará que o estado ativo está transbordando um pixel da borda do calendário.

Então, aqui, faremos algumas pequenas correções.

Primeiro vamos diminuir a largura da data para 29px, e defina a margem direita da última coluna e margem esquerda da primeira coluna para 0 para inverter o -1px margem que definimos anteriormente para o estado ativo.

.ui-datepicker-calendar td: primeiro filho .ui-state-active largura: 29px; margem esquerda: 0;  .ui-datepicker-calendar td: último filho .ui-state-active largura: 29px; margem-direita: 0;

A data na última linha do calendário também terá um tratamento semelhante.

.ui-datepicker-calendar tr: último filho .ui-state-active altura: 29px; margem-fundo: 0;

Agora vamos ver o resultado. Bem, o calendário agora está lindo e se encaixa perfeitamente como nossa referência de design. E você pode ver a demonstração e baixar a fonte para examinar o código dos links abaixo da imagem.

Demonstração
Fonte de download

Bônus: estenda o calendário

Bem, hoje aprendemos bastante sobre como criar um tema personalizado para o jQuery UI Datepicker. Mas você não deve parar por aqui, pois ainda há muitas coisas que podem ser estendidas a partir deste datepicker. Dependendo da sua proficiência em jQuery e CSS, você estende o calendário para que seja assim: entrada de texto com um datepicker de sobreposição.

Demonstração
Fonte de download

Leitura Adicional

Para mais informações sobre a interface do usuário do jQuery. Você pode ler a documentação completa aqui:

Introdução ao jQuery UI
Theming jQuery UI
IU do jQuery: classes de API do Theming

Pensamentos finais

Obrigado por ler e seguir este tutorial, espero que seja útil. E, se você tiver algum comentário ou quiser adicionar coisas que possam estar faltando neste tutorial, fique à vontade para indicá-lo na seção de comentários abaixo. Obrigado novamente).