Use JQuery UI DatePicker com ícones do jQuery UI Tema

Question

Eu tenho uma configuração de controle datepicker usando o jQuery UI, eu também estou usando os temas jQuery UI que fornecem um monte de ícones padrão que deseja usar.

O DatePicker permite especificar uma imagem específica, ou seja:.

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>  

Para exibir um ícone a partir do ícone set você usar algo como:

<span class="ui-icon ui-icon-calendar"></span>

Existe um fácil de integrar os dois ou eu só precisa cortar os estilos / imagens manualmente?

Answer 1

Eu tenho medo que você vai ter que fazer isso manualmente. Por padrão, o plugin Datepicker usa o seguinte HTML para inserir o buttonImage especificado:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

A propósito, você pode querer usar ...

$(function() {
 // your code here
});

... em vez de ...

$(document).ready(function() {
 // your code here
});

Answer 2

Eu tenho que trabalhar, fazendo isso

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

Apenas modifica o botão que se insere ao lado de sua entrada para o calendário. Por padrão eles jogam três elipses no texto, então eu remover essa também.

Answer 3

Sugiro colocar a imagem na entrada

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

Como

Eu costumava este ícone do agradável < a href = "http://commons.wikimedia.org/wiki/Tango_icons"> tango ícones projeto também disponível em png

Vantagens:

• Independente de javascript
• Cargas instantaneamente com o DOM
• Future entradas de data fácil adicionar

Answer 4

A melhor maneira seria;

Primeiro use o javascript como você já usou.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

Em seguida, adicione o seguinte código css;

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

Esta css vai ajudar você a alinhar a imagem calendário corretamente como você precisar.

Answer 5

Apenas um acompanhamento menor sobre a resposta Evs' ... (grande ajuda e obrigado EVS!).

Ele funciona no IE8 também, e eu adicionei CSS para alterar o cursor em foco:

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

http://jqueryui.com/demos/datepicker/#icon-trigger

é fornecido um muito bom exemplo, com o código de exemplo.

Answer 7

Contracção de e estender a resposta de Loktar, você poderia tentar algo como isto, nota eu só testei isso em FF10, mas eu não posso ver por que ele não iria funcionar em outros navegadores.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

Note que, neste exemplo, Data-picker botão escondido e Data-picker-ícone são as minhas próprias classes, já que eu não gosto de denominar o jQuery classes CSS diretamente. Aplicar o seguinte CSS:

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

Esta é efetivamente colocando um ícone normal período jQuery atrás do botão. O botão é ver-through completamente / opaca (via CSS), no entanto, porque ele ainda está em cima do ícone, clicando nos gatilhos ícone do evento clique de botão.

Answer 8

Eu usei esse código jQuery para obter um datepicker para um campo textinput e um ícone jQuery UI para o trabalho como uma imagem no botão datepicker.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

Answer 9

mudança: a showOn: "ambos", // botão

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 10

Em indo a rota de configurar manualmente um botão / ícone, você poderia usar este exemplo de Como combinar do jQueryUI DatePicker Ícone de disparo com Bootstrap 3 de Grupos de entrada para ter um evento JS clique definir o foco na data relevante campo de entrada, desencadeando a funcionalidade data jQueryUI a aparecer.

Ou, como o href="http://api.jqueryui.com/datepicker/#method-show" rel="nofollow documentação estados, você pode usar o método show para exibir o selecionador de data (nota que "Se o datepicker está ligado a uma entrada, a entrada deve ser visível para o datepicker para ser mostrado.").

$( ".selector" ).datepicker( "show" );

Isso permite que você usar qualquer botão / imagem / ícone ao lado de um campo de entrada, e ser capaz de clicar na / imagem / ícone do botão para acionar a funcionalidade data para o campo de entrada.

Answer 11

Eu tenho isso para trabalho, adicionando o código HTML para o meu botão de ícone diretamente para a opção buttonText e desativando a opção buttonImage.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});