Wie lösche / setze ich die ausgewählten Daten im jQuery UI Datepicker-Kalender zurück?

84

Wie setze ich die Datumsauswahl-Kalenderwerte zurück? .. Die Min- und Max-Datumsbeschränkungen?

Das Problem ist, dass beim Löschen der Daten (durch Löschen der Textfeldwerte) die vorherigen Datumsbeschränkungen weiterhin angewendet werden.

Ich habe die Dokumentation durchgesehen und nichts ist als Lösung herausgesprungen. Ich konnte auch keine schnelle Lösung für eine SO / Google-Suche finden

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


Lösung:

// 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 () ist eine private Methode des DatePicker-Objekts. Sie werden es nicht in der öffentlichen API auf der Website von jQuery UI finden, aber es funktioniert wie ein Zauber.

Cory Danielson
quelle

Antworten:

86

Ich habe versucht, genau dies zu erreichen, dh den Datepicker zu leeren, damit die vom Benutzer eingegebenen Filter entfernt werden können. Ein bisschen googeln fand ich diesen süßen Code:

Sie können die Löschfunktion auch in schreibgeschützten Feldern hinzufügen. Fügen Sie einfach Ihren folgenden Code zu Ihrem Datepicker hinzu:

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

Die Benutzer können (sogar schreibgeschützte Felder) hervorheben und dann die Rücktaste oder die Löschtaste verwenden, um das Datum mithilfe der _clearDateFunktion zu entfernen .

Quelle

Leniel Maccaferri
quelle
9
Beeindruckend. Warum sollte das nicht veröffentlicht werden?! Es ist auch auf der jQuery-Benutzeroberfläche von der API ausgeschlossen. Dies macht keinen Sinn. ---- Ich habe Ihren Beitrag so bearbeitet, dass die Lösung besser zu meiner Frage passt. Sehr schöner Fund
Cory Danielson
Akzeptiere meine Bearbeitung, ich habe deine Antwort so angepasst, dass sie meiner Frage entspricht, anstatt ein Kopier- / Einfüge-Dump mit unvollständigem Code zu sein
Cory Danielson
Ist Ihre Bearbeitung nicht bereits aktiv? Ich kann keine Option sehen, um Ihre Bearbeitung zu akzeptieren ... :)
Leniel Maccaferri
3
Nein, das ist okay. Ich denke, dass sowohl die in meinem ursprünglichen Beitrag enthaltene als auch Ihre Lösung fast jedem helfen wird, der den Weg zu dieser Seite findet. Vielleicht einige Kommentare darüber, was keyCode 8 und 46 sind oder was thisgenau in _clearDates () enthalten ist
Cory Danielson
1
wo genau legst du das hin
w0051977
61

Hast du versucht:

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

Das sollte gemäß der API-Dokumentation funktionieren

DavidWainwright
quelle
Ich habe ein Formular mit einer Datumsauswahl, mit der ich ein Datum bearbeite, das ich entsprechend dem aktuellen Datum ausfüllen möchte. Ich finde diese Lösung, um mein Bearbeitungsformular zurückzusetzen, bevor ich "setDate" mit dem aktuellen Datum verwende, aber ich habe ein Formatproblem: Ohne das habe ('setDate', null)ich das gewünschte Format (TT / MM / JJJJ) , aber wenn ich es verwende, habe ich MM / TT / JJJJ ... der einzige Unterschied ist die Verwendung von ('setDate', null), eine Idee warum?
Mickaël Leger
Sorry Mickael - das weiß ich nicht. Haben Sie versucht, das Format zurückzusetzen, nachdem Sie das Datum gemäß stackoverflow.com/questions/1328025/… auf null gesetzt haben ?
DavidWainwright
22

Sie müssen nur die Optionen erneut auf null setzen:

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

Ich habe deine jsfiddle geändert: http://jsfiddle.net/tF5MH/9/

Simon Wang
quelle
Ja, danke. Du hast Recht. Es ist lustig, dieses Problem gibt es sogar auf der jQuery UI Datepicker Demo-Seite. jqueryui.com/demos/datepicker/#date-range Setzen Sie das Datum, leeren Sie das Textfeld und das Problem besteht
Cory Danielson
1
Dies ist sicher der sauberste Weg. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X
13
$('.date').datepicker('setDate', null);
Soni Sharma
quelle
10

Versuchen Sie, den Clearing-Code in Folgendes zu ändern:

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

Versuchen Sie dies. Dadurch wird eine Schaltfläche zum Löschen des JQuery-Kalenders hinzugefügt, mit der das Datum gelöscht wird.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});
Sohaib
quelle
Diese Antwort ist wahrscheinlich besser als die anderen, obwohl sie in Firefox nicht funktioniert. Und das Ersetzen document.getElementById(this.id).value = '';durch $(this).val('').change();macht es noch besser, weil dann auch alle etablierten Änderungshandler aufgerufen werden.
Ryan
3

Setzen Sie die maximalen Datumsattribute auf Ihrem Datepicker zurück, wenn Sie auf Löschen klicken.

Von der jquery-Website

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
Mark W.
quelle
Ja, du hast recht. Ich habe j08691 als beste Antwort markiert, weil er mir einen Code gegeben hat, den ich in die Geige schlagen konnte, die funktionierte. Leider konnte ich sie nicht beide als beste markieren: /
Cory Danielson
Ja, ich weiß, ich wollte es mit etwas Code in Bezug auf Ihr Problem ein bisschen besser erklären, aber er hat mich geschlagen. :)
Mark W
3

Die offensichtliche Antwort war die, die für mich funktioniert hat.

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

Dabei ist $ ('# datepicker') die ID des Eingabeelements.

omarjebari
quelle
Ich habe diese Lösung in der JSFiddle ausprobiert und sie hat nicht funktioniert. jsfiddle.net/tF5MH/407 Siehe die Wiedergabeschritte unter den Eingaben. Mit .val('')wird die Eingaben geleert, die Einschränkungen für die Datumsauswahl in den Kalendern werden jedoch nicht aufgehoben.
Cory Danielson
Ich habe es auch mit der neuesten Version von jQuery UI (v1.12.0) versucht, aber es hat nicht funktioniert.
Cory Danielson
Vielen Dank omar. Ich habe diese funktionierende Lösung in den letzten 20 Minuten gesucht. Du bist ein lebensrettender Mann! ..
Mahesh
1

Ich weiß, dass es etwas zu spät ist, aber hier ist ein einfacher Code-Frieden, der es für mich getan hat:

$('#datepicker-input').val('').datepicker("refresh");
Miguel BinPar
quelle
Ich kann nicht sehen, dass die Aktualisierung zusätzliche Auswirkungen hat. Sie können den Wert einfach löschen.
Omarjebari
1
Ich finde es gut, dass Sie eine öffentliche oder private Funktion verwenden, um die Steuerung zu löschen.
SchneeYetis
0

Eine modifizierte Version der Lösung von Leniel Macaferi, um zu berücksichtigen, dass die Rücktaste eine Verknüpfung zum Zurückblättern in IE8 ist, wenn ein Textfeld keinen Fokus hat (was anscheinend der Fall ist, wenn die Datumsauswahl geöffnet ist).

Es wird auch verwendet val(), um das Feld zu löschen, da _clearDate(this)es bei mir nicht funktioniert hat.

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

Meine Datepicker- Initialisierung sieht folgendermaßen aus:

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

Die Standardschaltfläche "Fertig" enthält also den Text "Löschen" .

Jetzt finden Sie in datepicker.js die interne Funktion '_attachHandlers'. Es sieht so aus:

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

Und ändern Sie die Versteckfunktion so, dass sie wie folgt aussieht:

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

Die Lösung kam von diesem * data-handler = "hide" *

Alexandru Banaru
quelle
0

Ich benutze diesen Code, um das Feld und alle Spielereien zu löschen. Ich brauchte ein leeres Feld für meinen Anwendungsfall

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

Aus irgendeinem Grund .val('')würde das bei mir nicht funktionieren. Aber jQuery zu umgehen hat es geschafft. Meiner Meinung nach ist es ein Fehler, dass es keine .datepicker-Option ('clear') gibt.

Tschallacka
quelle
0

Mein Weg, um dieses Problem zu lösen

Ändern Sie die var-Steuerelemente in 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>" : "");

Fügen Sie dann eine clearText-Variable hinzu

    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

Und vor der Showfunktion

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);
Дмитрий Бабушкин
quelle
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
quelle
0

In Firefox erledigt es meine Arbeit in Form (programmgesteuert), wobei die Datumsauswahl standardmäßig deaktiviert ist:

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

Bitte versuchen Sie diese Lösung, es wird richtig funktionieren, wie ich es versucht habe

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

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