Jak zresetować wartości kalendarza DatePicker? .. Ograniczenia minimalnej i maksymalnej daty?

Problem polega na tym, że kiedy wyczyszczę daty (usuwając wartości pól tekstowych), poprzednie ograniczenia dat są nadal stosowane.

Przeglądałem dokumentację i nic nie wyskoczyło jako rozwiązanie. Nie mogłem też znaleźć szybkiego rozwiązania w wyszukiwaniu SO / Google

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

Rozwiązanie:

// 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 () to prywatna metoda obiektu DatePicker. Nie znajdziesz go w publicznym API na stronie jQuery UI, ale działa jak urok.

Próbowałem osiągnąć właśnie to, czyli opróżnić datepicker, aby filtry wprowadzone przez użytkownika mogły zostać usunięte. Trochę googlując, znalazłem ten słodki fragment kodu:

Możesz dodać przejrzystą funkcję nawet w polach tylko do odczytu. Po prostu dodaj następujący kod do swojego datepickera:

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

Ludzie będą mogli podświetlić (nawet pola tylko do odczytu), a następnie użyć klawisza Backspace lub Delete, aby usunąć datę za pomocą _clearDatefunkcji.

Źródło

Próbowałeś:

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

To powinno działać zgodnie z dokumentacją API

wystarczy ponownie ustawić opcje na null:

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

Zmieniłem twój jsfiddle: http://jsfiddle.net/tF5MH/9/

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

Spróbuj zmienić kod rozliczeniowy na:

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

Spróbuj tego, to doda przycisk Clear w kalendarzu JQuery, który wyczyści datę.

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

Zresetuj atrybuty maksymalnej daty w DatePicker po kliknięciu wyczyść.

Ze strony jquery

Get or set the maxDate option, after init.

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

Wiem, że jest trochę za późno, ale oto prosty spokój kodu, który zrobił to za mnie:

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

Oczywista odpowiedź była dla mnie skuteczna.

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

gdzie $ ('# datepicker') to identyfikator elementu wejściowego.

Zmodyfikowana wersja rozwiązania Leniel Macaferi uwzględniająca klawisz Backspace będący skrótem „wstecz strony” w IE8, gdy pole tekstowe nie jest aktywne (co wydaje się mieć miejsce, gdy datapicker jest otwarty).

Używa również val()do wyczyszczenia pola, ponieważ _clearDate(this)nie działa dla mnie.

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

Moja inicjalizacja Datepicker wygląda następująco:

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

Tak więc domyślny przycisk „Gotowe” będzie miał „Wyczyść” tekst .

Teraz wewnątrz datepicker.js znajdź funkcję wewnętrzną „_attachHandlers”. Wygląda ona tak:

 _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 () {...}
                    ... 

I zmień funkcję ukrywania, aby wyglądała następująco:

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

Używam tego kodu, aby wyczyścić pole i wszystkie oszustwa. Potrzebowałem pustego pola dla mojego przypadku użycia

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

Z jakiegoś powodu .val('')nie zadziała dla mnie. Ale ominięcie jQuery zrobiło to. Moim zdaniem wadą jest to, że nie ma opcji .datepicker („wyczyść”).

Mój sposób na rozwiązanie tego problemu

Zmień var 'controls' na 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>" : "");

Następnie dodaj zmienną 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

A przed pokazem funkcji

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

W Firefoksie działa to dla mnie w formie (programowo), gdzie kontrola Datepicker jest domyślnie wyłączona:

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

Wypróbuj to rozwiązanie, będzie działać poprawnie, tak jak próbowałem

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

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