Jak wyczyścić / zresetować wybrane daty w kalendarzu Datepicker jQuery UI?

85

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.

Cory Danielson
źródło

Odpowiedzi:

86

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

Leniel Maccaferri
źródło
9
Łał. Dlaczego nie zostałoby to opublikowane ?! Jest również wykluczony z API w interfejsie użytkownika jQuery ... nie ma sensu. ---- Zredagowałem Twój post, aby rozwiązanie lepiej pasowało do mojego pytania. Bardzo fajne znalezisko
Cory Danielson
zaakceptuj moją edycję, poprawiłem twoją odpowiedź, aby pasowała do mojego pytania zamiast być kopiowaniem / wklejaniem niekompletnego kodu
Cory Danielson
Czy Twoja edycja nie jest już aktywna? Nie widzę opcji zaakceptowania Twojej zmiany ... :)
Leniel Maccaferri
3
Nie, w porządku. Myślę, że zarówno rozwiązanie zawarte w moim oryginalnym poście, jak i Twoje pomoże niemal każdemu, kto trafi na tę stronę. Może kilka komentarzy na temat tego, czym są keyCode 8 i 46 lub co thisdokładnie znajduje się w _clearDates ()
Cory Danielson
1
gdzie dokładnie to umieścisz?
w0051977
63

Próbowałeś:

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

To powinno działać zgodnie z dokumentacją API

DavidWainwright
źródło
Mam formularz z danymi wejściowymi w celu wybrania daty, których używam do edycji daty, którą chcę wypełnić zgodnie z aktualną datą. Znalazłem to rozwiązanie, aby zresetować mój formularz edycji przed użyciem "setDate" z aktualną datą, ale mam problem z formatem: bez ('setDate', null)mam format, który chcę (DD / MM / RRRR) , ale kiedy go używam, mam MM / DD / RRRR ... jedyną różnicą jest użycie ('setDate', null), jakiś pomysł dlaczego?
Mickaël Leger
Przepraszam Mickael - nie wiem o tym. Czy próbowałeś zresetować format po ustawieniu daty na wartość null zgodnie ze stackoverflow.com/questions/1328025/… ?
DavidWainwright
22

wystarczy ponownie ustawić opcje na null:

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

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

Simon Wang
źródło
tak, dzięki. masz rację. To zabawne, ten problem istnieje nawet na stronie demonstracyjnej Datepicker UI jQuery. jqueryui.com/demos/datepicker/#date-range Ustaw datę, a następnie opróżnij pole tekstowe i problem istnieje
Cory Danielson
1
To z pewnością najczystszy sposób. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X
13
$('.date').datepicker('setDate', null);
Soni Sharma
źródło
10

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 );
});
j08691
źródło
8

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 = '';
        }
    }
});
sohaib
źródło
1
Ta odpowiedź jest prawdopodobnie lepsza niż inne, mimo że nie działa w przeglądarce Firefox. A zastąpienie document.getElementById(this.id).value = '';przez $(this).val('').change();sprawia, że ​​jest jeszcze lepiej, ponieważ wtedy wywoływane są również wszelkie ustalone programy obsługi zmian.
Ryan
3

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' );
Mark W.
źródło
Tak, masz rację. Oznaczyłem j08691 jako najlepszą odpowiedź, ponieważ dał mi kod, który mogłem wcisnąć w działające skrzypce. Niestety nie udało mi się ocenić ich obu jako najlepszych: /
Cory Danielson
Tak, wiem, zamierzałem to trochę lepiej wyjaśnić za pomocą jakiegoś kodu odnoszącego się do twojego problemu, ale on mnie pokonał. :)
Mark W
3

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

$('#datepicker-input').val('').datepicker("refresh");
Miguel BinPar
źródło
Nie widzę, że odświeżanie robi coś więcej. Możesz po prostu wyczyścić wartość.
omarjebari
1
Podoba mi się, że używasz połączenia publicznego zamiast funkcji prywatnej, aby wyczyścić kontrolę.
śnieg Yetis
1
@Miguel BinPar, wiem, że ten post jest stary, ale Twoja odpowiedź jest jedyną odpowiedzią, która zadziałała dla mnie po 3 dniach próbowania tego. Dzięki!
kejo
3

Oczywista odpowiedź była dla mnie skuteczna.

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

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

omarjebari
źródło
Wypróbowałem to rozwiązanie w JSFiddle i nie działa. jsfiddle.net/tF5MH/407 Zobacz kroki odtwarzania poniżej danych wejściowych. Użycie .val('')spowoduje opróżnienie danych wejściowych, ale nie usunie ograniczeń selektora dat w kalendarzach.
Cory Danielson,
Próbowałem też z najnowszą wersją interfejsu użytkownika jQuery (v1.12.0) i nie działało.
Cory Danielson,
Dzięki ton omar. Szukałem tego działającego rozwiązania od ostatnich 20 minut. jesteś człowiekiem ratującym życie! ..
Mahesh
0

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();
});
Kidquick
źródło
0

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

Rozwiązanie pochodzi z tego * data-handler = "hide" *

Alexandru Banaru
źródło
0

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ść”).

Tschallacka
źródło
0

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
            );
        }
    }
);
Дмитрий Бабушкин
źródło
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('');
            }
        }
    });
Jain Abhishek
źródło
0

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
Isma
źródło
-1

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');
gaurav bhatt
źródło