botão Hoje em jQuery DatePicker não funciona

Question

Eu estou usando jQueryUI Datepicker e mostrar o botão "Today". Mas ele não funciona. Ele também não funciona na demonstração: http://www.jqueryui.com/demos/datepicker / # ButtonBar

I'w deseja preencher entrada com hoje quando pressionar este botão.

É possível fazê-lo funcionar?

Answer 1

Seu código não é realmente quebrado. Ele só não fazer o que a maioria das pessoas seria de esperar que ele faça. Que é para entrar a data de hoje na caixa de entrada. O que ele faz, é destaque para o usuário para ver a data de hoje no calendário. Se eles estavam fora em um mês ou um ano, os pops calendário Voltar ao modo de hoje sem desmarcando a data em que o usuário estiver selecionado.

Para torná-lo mais intuitivo, você precisa atualizar o código do plugin para atender às suas necessidades. Deixe-me saber como ele vai.

Você vai precisar para obter a versão descompactada do javascript jquery-ui. Eu estou olhando para a versão 1.7.2 ea função "_gotoToday" está na linha 6760. Basta adicionar uma chamada em que _gotoToday que os incêndios fora da função _selectDate () na linha 6831. :) Feliz Codificação.

Answer 2

Eu não gosto da solução de modificar o código-fonte jQuery porque remove a capacidade de usar um CDN. Em vez disso, você pode transferir a função _gotoToday, incluindo este código com base nos @meesterjeeves resposta em algum lugar no arquivo escopo JavaScript de sua página:

$.datepicker._gotoToday = function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
            inst.selectedDay = inst.currentDay;
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;
            inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
            var date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
            // the below two lines are new
            this._setDateDatepicker(target, date);
            this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
}

O código de cima é essencialmente o mesmo que o jQuery UI Datepicker de versão 1.10.1, excepto para as duas linhas marcadas acima. O todo murmúrio-jumbo com gotoCurrent pode realmente ser removido uma vez que a opção não faz sentido com o nosso novo significado de "hoje".

Answer 3

Eu acho que a melhor maneira de lidar com isso é para substituir o exterior método _goToToday da própria biblioteca. Isso resolveu o problema para mim:

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
  old_goToToday.call(this,id)
  this._selectDate(id)
}

simples e não requer que você cortar-se quaisquer eventos ou alterar qualquer funcionalidade subjacente

Answer 4

Apenas adicione as seguintes duas linhas de código para a função _gotoToday ...

/* Action for current link. */
_gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
        inst.selectedDay = inst.currentDay;
    inst.drawMonth = inst.selectedMonth = inst.currentMonth;
    inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
        var date = new Date();
        inst.selectedDay = date.getDate();
        inst.drawMonth = inst.selectedMonth = date.getMonth();
        inst.drawYear = inst.selectedYear = date.getFullYear();
    }
    this._notifyChange(inst);
    this._adjustDate(target);

    /* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
    this._setDateDatepicker(target, new Date());
    this._selectDate(id, this._getDateDatepicker(target));
},

Answer 5

Embora eu sei que isso já foi aceito, aqui está a minha solução expandida com base em o Samy Zine ideia . Este foi usando jQuery 1.6.3 e jQuery UI 1.8.16, e funcionou para mim no Firefox 6.

$('.ui-datepicker-current').live('click', function() {
    // extract the unique ID assigned to the text input the datepicker is for
    // from the onclick attribute of the button
    var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
    // set the date for that input to today's date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});

Você pode querer também blur() o $associatedInput e foco no próximo input / selecionar em sua página, mas isso não é trivial para fazer genericamente, ou é específico de implementação.

Como um exemplo, eu fiz isso em uma página que eu estava trabalhando em que as tabelas usadas para layout (não me faça começar, eu sei que é uma prática ruim!):

$associatedInput.closest('tr').next('tr').find('input,select').first().focus();

Answer 6

Eu não gosto da idéia de adicionar código extra para o código-fonte jQuery. E eu não quero substituir o método _gotoToday por copiar e colar seu lugar implementação no código javascript e adicionando linhas extras na parte inferior.

Então, eu tweaked-lo usando este código:

(function(){
    var original_gotoToday = $.datepicker._gotoToday;

    $.datepicker._gotoToday = function(id) {
        var target = $(id),
            inst = this._getInst(target[0]);

        original_gotoToday.call(this, id);
        this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    }
})();

Answer 7

Você deve usar a opção todayBtn:

$("...").datepicker({
  todayBtn: "linked"
})

(em vez de todayBtn: true).

todayBtn

booleano, “ligado”. Padrão: false

Se verdadeiro ou “ligado”, exibe um botão “Today”, na parte inferior do datepicker para selecionar a data atual. Se for verdade, o botão “Today” só irá mover a data atual à vista; se “ligado”, a corrente data também será selecionado.

Para mais detalhes olhe para o seguinte link: http://bootstrap-datepicker.readthedocs.io/en/latest/ options.html # todaybtn

Answer 8

Documentação diz o botão "hoje" que título poderia ser alterada via

.datepicker('option', 'currentText', 'New Title') 

só muda mês exibida a atual. Esse comportamento também pode ser configurado

.datepicker('option', 'gotoCurrent', true);

Depois que ao premir o botão mudará exibida mês a um de data selecionada.

Parece submeter uma data com este botão é impossível por design.

Answer 9

Eu adicionei uma opção para o datepicker para o efeito:. SelectCurrent

Para fazer o mesmo, você só tem que adicionar o seguinte para o arquivo js descompactado:

1) Para o fim da função Datepicker (), adicione:

selectCurrent: false // True to select the date automatically when the current button is clicked

2) No final da função _gotoToday, adicione:

if (this._get(inst, 'selectCurrent'))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

Answer 10

Eu só tenho livrar dele.

Em algum arquivo CSS que é parte da sua página:

.ui-datepicker-current {
    visibility:hidden
}

Answer 11

Você pode tentar o código abaixo, assim como para preencher data atual na caixa de entrada no clique de botão Today. Basta colocar o código abaixo na função _gotoToday (no final da função) em jquery.ui.datepicker.js.

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

Por favor note que eu estou usando a versão 1.8.5 do datepicker jquery.

Answer 12

jQuery UI DatePicker Hoje Fazer a ligação

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

Answer 13

$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]);

  var date = new Date();
  this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}

$.datepicker.setDefaults({
  changeMonth: true,
  maxDate: 'today',
  numberOfMonths: 1,
  showButtonPanel: true
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">

Answer 14

O datepicker está sendo reformulado para ser pelo menos 10 vezes mais impressionante. A nova versão irá abordar esta questão.

http://wiki.jqueryui.com/w/page/12137778/Datepicker

Answer 15

Você também pode tentar adicioná-lo ao seu script:

$('.ui-datepicker-current').live('click', function() {
       $(".datepicker").datepicker("setDate", date);
});

(função .Live uso e não .click)

Answer 16

Este é um truque que funcionou para mim que usa função de retorno beforeShow do Datepicker ao contrário da abordagem ao vivo ().

     ,beforeShow: function(input, datepicker) {
         setTimeout(function() {
             datepicker.dpDiv.find('.ui-datepicker-current')
                .text('Select Today')
                .click(function() {
                     $(input)
                         .datepicker('setDate', new Date())
                         .datepicker('hide');
                });
         }, 1);
         return {};
     }

Answer 17

Este é um simples corte

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});

Answer 18

Eu resolvi uma maneira diferente.

Acho que é irritante navegar para uma data depois ter que lembre-se de clicar sobre o dia, mesmo se ele já estiver selecionado (após clicar ao lado / mês anterior).

Aqui eu atualizar o campo de entrada diretamente à medida que avançamos em torno dos meses / anos - que também dispara quando o botão Hoje é clicado. Eu também preciso o evento de alteração ao fogo sempre que a seleção mudou.

$input.datepicker({
    ...
    onChangeMonthYear: function (year, month, inst)
    {
        var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        if (!isNaN(date))
        {
            input.value = $.datepicker.formatDate("dd M yy", date);
            $input.change();
        }
    }
}

Answer 19

(Por favor nota, esta não é uma pergunta. Eu estou tentando ser útil, fornecendo a minha solução, pois as outras soluções não funcionou para mim.)

Eu não poderia obter o datepicker ficar escondido com qualquer uma das outras respostas. O calendário iria fechar e então re-aberto. O código a seguir trabalhou para mim para mudar o botão Hoje para definir a data para o dia atual e fechar o calendário.

jQuery UI - v1.11.4 jQuery JavaScript Biblioteca v1.11.1 IE 11.0.28

Eu incluí meus padrões para completude.

    $.datepicker._gotoToday = function(id) {
      var inst = this._getInst($(id)[0]);

      var date = new Date();
      this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
    }

    $.datepicker.setDefaults({
      changeMonth: true,
      maxDate: 'today',
      numberOfMonths: 1,
      showButtonPanel: true
    });