Como faço para limpar / redefinir as datas selecionadas no calendário jQuery UI Datepicker?


85

Como faço para redefinir os valores do calendário do selecionador de data? .. As restrições de data mínima e máxima?

O problema é que quando eu limpo as datas (excluindo os valores da caixa de texto), as restrições de datas anteriores ainda são aplicadas.

Estive analisando a documentação e nada surgiu como uma solução. Eu também não consegui encontrar uma solução rápida em uma pesquisa SO / google

http://jsfiddle.net/CoryDanielson/tF5MH/


Solução:

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate () é um método privado do objeto DatePicker. Você não o encontrará na API pública no site do jQuery UI, mas funciona perfeitamente.

Respostas:


86

Eu estava tentando fazer exatamente isso, ou seja, esvaziar o selecionador de data para que os filtros inseridos pelo usuário pudessem ser removidos. Pesquisando um pouco no Google, encontrei este doce pedaço de código:

Você pode adicionar o recurso de limpeza mesmo em campos somente leitura. Basta adicionar o seguinte código ao seu selecionador de data:

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

As pessoas serão capazes de destacar (até mesmo os campos somente leitura) e, em seguida, usar a tecla backspace ou a tecla delete para remover a data usando a _clearDatefunção.

Fonte


9
Uau. Por que isso não seria divulgado ?! Ele também é excluído da API no jQuery UI ... não faz sentido. ---- Eu editei sua postagem para que a solução corresponda melhor à minha pergunta. Muito bom achado
Cory Danielson

aceitar minha edição, ajustei sua resposta para corresponder à minha pergunta em vez de copiar / colar o código incompleto
Cory Danielson,

Sua edição já não está ativa? Não consigo ver uma opção para aceitar sua edição ... :)
Leniel Maccaferri

3
Nah, tudo bem. Acho que tanto a solução incluída em minha postagem original quanto a sua ajudarão quase todos que encontrarem o caminho para esta página. Talvez alguns comentários sobre o que são keyCodes 8 e 46 ou o que thisestá exatamente dentro de _clearDates ()
Cory Danielson

2
onde exatamente você coloca isso?
w0051977

63

Você tentou:

$('selector').datepicker('setDate', null);

Isso deve funcionar de acordo com a documentação da API


Eu tenho um formulário com alguma entrada do selecionador de data que uso para editar alguma data que desejo preencher de acordo com a data atual. Acho essa solução para redefinir meu formulário de edição antes de usar "setDate" com a data atual, mas estou com um problema de formato: sem o ('setDate', null)tenho o formato que quero (DD / MM / AAAA) , mas quando o uso tenho MM / DD / AAAA ... a única diferença é o uso de ('setDate', null), alguma ideia do porquê?
Mickaël Leger

Desculpe Mickael - eu não sei sobre isso. Você já tentou redefinir o formato depois de definir a data como nula de acordo com stackoverflow.com/questions/1328025/… ?
DavidWainwright

22

você só precisa definir as opções novamente para nulo:

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

Eu mudei seu jsfiddle: http://jsfiddle.net/tF5MH/9/


sim, obrigado. você está certo. É engraçado, esse problema existe até na página de demonstração do jQuery UI Datepicker. jqueryui.com/demos/datepicker/#date-range Defina a data de término , em seguida, esvazie a caixa de texto e o problema existe
Cory Danielson

1
Essa é a maneira mais limpa, com certeza. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X


10

Tente alterar o código de compensação para:

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

8

Tente isto, isto adicionará o botão Clear no calendário Jquery que irá limpar a data.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});

1
Esta resposta é provavelmente melhor do que as outras, embora não funcione no Firefox. E substituir document.getElementById(this.id).value = '';por $(this).val('').change();torna-o ainda melhor, porque qualquer manipulador de alterações estabelecido também será chamado.
Ryan

3

Redefina os atributos de data máxima em seu selecionador de data ao clicar em limpar.

Do site jquery

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

Sim, você está correto. Eu marquei j08691 como a melhor resposta porque ele me deu um código que eu poderia colocar no violino que funcionou. Infelizmente não pude classificá-los como os melhores: /
Cory Danielson

Sim, eu sei, eu ia explicar um pouco melhor com algum código relativo ao seu problema, mas ele chegou antes de mim. :)
Mark W

3

Eu sei que é um pouco tarde, mas aqui está um trecho de código simples que fez isso por mim:

$('#datepicker-input').val('').datepicker("refresh");

Não consigo ver que a atualização tem algum efeito extra. Você pode simplesmente limpar o valor.
omarjebari,

1
Eu gosto que você esteja usando uma chamada pública vs. função privada para limpar o controle.
neve Yetis

1
@Miguel BinPar, sei que este post é antigo, mas sua resposta é a única que funcionou para mim depois de 3 dias tentando descobrir isso. Obrigado!
kejo

3

A resposta óbvia foi a que funcionou para mim.

$('#datepicker').val('');

onde $ ('# datepicker') é o id do elemento de entrada.


Tentei essa solução no JSFiddle e não funcionou. jsfiddle.net/tF5MH/407 Veja as etapas de reprodução abaixo das entradas. Usar .val('')esvazia as entradas, mas não limpa as restrições do selecionador de data nos calendários.
Cory Danielson

Eu também tentei com a versão mais recente do jQuery UI (v1.12.0) e não funcionou.
Cory Danielson

Muito obrigado, omar. Tenho procurado esta solução de trabalho nos últimos 20 minutos. você é um salva-vidas! ..
Mahesh,

0

Uma versão modificada da solução de Leniel Macaferi para considerar a tecla backspace como um atalho de "página anterior" no IE8 quando um campo de texto não tem foco (o que parece ser o caso quando o selecionador de data está aberto).

Ele também usa val()para limpar o campo, pois _clearDate(this)não funcionou para mim.

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});

0

Minha inicialização do selecionador de data se parece com:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

Portanto, o botão padrão 'Concluído' terá o texto 'Limpar' .

Agora, em datepicker.js, localize a função interna '_attachHandlers'. Ela se parece com:

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

E mude a função de ocultar para se parecer com:

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

A solução veio deste * data-handler = "hide" *


0

Eu uso este código para limpar o campo e todas as travessuras. Eu precisava de um campo vazio para meu caso de uso

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

Por algum motivo .val(''), não funcionaria para mim. Mas contornar o jQuery conseguiu. Em minha opinião, é uma falha não haver a opção .datepicker ('limpar').


0

Minha maneira de resolver este problema

Alterar var 'controles' em ui.js

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

Em seguida, adicione um clearText var

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

E antes de mostrar a função

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);

0
$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });

0

No Firefox, ele faz o trabalho para mim na forma (programaticamente), onde o controle do selecionador de data está desabilitado por padrão:

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state

-1

Tente esta solução; ela funcionará corretamente como eu tentei

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
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.