Come posso cancellare / ripristinare le date selezionate sul calendario Datepicker dell'interfaccia utente di jQuery?


85

Come faccio a reimpostare i valori del calendario di datepicker? .. Le restrizioni di data minima e massima?

Il problema è che quando cancello le date (eliminando i valori della casella di testo), vengono ancora applicate le restrizioni di data precedenti.

Ho smistato la documentazione e non è saltato fuori niente come soluzione. Inoltre, non sono riuscito a trovare una soluzione rapida su una ricerca SO / google

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


Soluzione:

// 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 () è un metodo privato dell'oggetto DatePicker. Non lo troverai nell'API pubblica sul sito Web di jQuery UI, ma funziona a meraviglia.

Risposte:


86

Stavo cercando di realizzare proprio questa cosa, cioè svuotare il datepicker in modo che i filtri inseriti dall'utente potessero essere rimossi. Cercando un po 'su Google ho trovato questo dolce pezzo di codice:

Puoi aggiungere la funzione di cancellazione anche sui campi di sola lettura. Aggiungi semplicemente il seguente codice al tuo datepicker:

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

Le persone saranno in grado di evidenziare (anche i campi di sola lettura) e quindi utilizzare backspace o cancella per rimuovere la data utilizzando la _clearDatefunzione.

fonte


9
Wow. Perché non dovrebbe essere pubblicizzato ?! È escluso anche dall'API sull'interfaccia utente di jQuery ... non ha senso. ---- Ho modificato il tuo post in modo che la soluzione corrisponda meglio alla mia domanda. Molto bella scoperta
Cory Danielson

accetta la mia modifica, ho ottimizzato la tua risposta per abbinare la mia domanda invece di essere un copia / incolla dump di codice incompleto
Cory Danielson

La tua modifica non è già attiva? Non vedo un'opzione per accettare la tua modifica ... :)
Leniel Maccaferri

3
Nah, va bene. Penso che sia la soluzione inclusa nel mio post originale che il tuo aiuteranno quasi tutti coloro che trovano la loro strada verso questa pagina. Forse alcuni commenti su cosa sono i thiscodici chiave 8 e 46 o cosa c'è esattamente all'interno di _clearDates ()
Cory Danielson

2
dove lo metti esattamente?
w0051977

63

Hai provato:

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

Dovrebbe funzionare secondo la documentazione API


Ho un modulo con un input di datepicker che uso per modificare una data che voglio riempire in base alla data corrente. Trovo questa soluzione per ripristinare il mio modulo di modifica prima di utilizzare "setDate" con la data corrente, ma ho un problema di formato: senza ('setDate', null)il formato ho il formato che desidero (GG / MM / AAAA) , ma quando lo uso ho MM / GG / AAAA ... l'unica differenza è l'uso di ('setDate', null), qualche idea del perché?
Mickaël Leger

Scusa Mickael, non lo so. Hai provato a ripristinare il formato dopo aver impostato la data su null come da stackoverflow.com/questions/1328025/… ?
DavidWainwright

22

devi solo impostare nuovamente le opzioni su null:

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

Ho cambiato il tuo jsfiddle: http://jsfiddle.net/tF5MH/9/


sì, grazie. hai ragione. È divertente, questo problema esiste anche nella pagina Demo Datepicker dell'interfaccia utente di jQuery. jqueryui.com/demos/datepicker/#date-range Imposta la data di inizio, quindi svuota la casella di testo e il problema esiste
Cory Danielson,

1
Questo è sicuramente il modo più pulito. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X


10

Prova a cambiare il codice di cancellazione in:

$('#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

Prova questo, questo aggiungerà il pulsante Cancella sul calendario Jquery che cancellerà la 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
Questa risposta è probabilmente migliore delle altre anche se non funziona in Firefox. E sostituire document.getElementById(this.id).value = '';con lo $(this).val('').change();rende ancora migliore perché in tal caso vengono chiamati anche tutti i gestori di modifiche stabiliti.
Ryan

3

Reimposta gli attributi della data massima sul datepicker quando fai clic su Cancella.

Dal sito web di jquery

Get or set the maxDate option, after init.

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

Sì, hai ragione. Ho contrassegnato j08691 come risposta migliore perché mi ha dato del codice che potevo inserire nel violino che funzionava. Purtroppo non sono riuscito a contrassegnarli entrambi come migliori: /
Cory Danielson

Sì, lo so, stavo per spiegarlo un po 'meglio con un po' di codice relativo al tuo problema, ma mi ha battuto. :)
Mark W

3

So che è un po 'troppo tardi, ma ecco un semplice codice che lo ha fatto per me:

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

Non riesco a vedere che l'aggiornamento fa alcun extra. Puoi semplicemente cancellare il valore.
omarjebari

1
Mi piace che tu stia usando una chiamata pubblica rispetto a una funzione privata per cancellare il controllo.
neve Yetis

1
@Miguel BinPar, so che questo post è vecchio ma la tua risposta è l'unica risposta che ha funzionato per me dopo 3 giorni di tentativi di capirlo. Grazie!
kejo

3

La risposta ovvia è stata quella che ha funzionato per me.

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

dove $ ('# datepicker') è l'id dell'elemento di input.


Ho provato quella soluzione in JSFiddle e non ha funzionato. jsfiddle.net/tF5MH/407 Vedere i passaggi di riproduzione sotto gli ingressi. L'utilizzo .val('')svuoterà gli input, ma non cancellerà le restrizioni del datepicker nei calendari.
Cory Danielson,

Ho anche provato con l'ultima versione di jQuery UI (v1.12.0) e non ha funzionato.
Cory Danielson,

Grazie mille. Ho cercato questa soluzione funzionante negli ultimi 20 minuti. sei un uomo salvavita! ..
Mahesh

0

Una versione modificata della soluzione di Leniel Macaferi per tenere conto del tasto backspace come scorciatoia "pagina indietro" in IE8 quando un campo di testo non ha il focus (che sembra essere il caso quando il datepicker è aperto).

Utilizza anche val()per cancellare il campo poiché _clearDate(this)non ha funzionato per me.

$("#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

La mia inizializzazione del datepicker è simile a:

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

Quindi, il pulsante predefinito "Fine" avrà il testo "Cancella" .

Ora, all'interno di datepicker.js, trova la funzione interna '_attachHandlers' Sembra:

 _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 cambia la funzione Nascondi in modo che assomigli a:

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

La soluzione è venuta da questo * data-handler = "hide" *


0

Uso questo codice per cancellare il campo e tutti gli imbrogli. Avevo bisogno di un campo vuoto per il mio caso d'uso

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

Per qualche motivo .val('')non funzionerebbe per me. Ma bypassando jQuery lo ha fatto. A mio parere è un difetto che non ci sia l'opzione .datepicker ('clear').


0

Il mio modo per risolvere questo problema

Cambia var 'controls' su 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>" : "");

Quindi aggiungi una variabile clearText

    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 prima della funzione di spettacolo

$(".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

In Firefox funziona per me in forma (a livello di programmazione), dove il controllo datepicker è disabilitato per impostazione predefinita:

$("#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

Si prega di provare questa soluzione che funzionerà correttamente come ho provato

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.