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.

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

Hai provato:

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

Dovrebbe funzionare secondo la documentazione API

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/

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

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 );
});

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 = '';
        }
    }
});

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' );

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

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

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

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

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

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();
});

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();
                    },
                    ...

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').

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
            );
        }
    }
);

$("#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('');
            }
        }
    });

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

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

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');