wake-up-neo.net

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

Wie setze ich die Datumskalender-Kalenderwerte zurück?

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

Ich habe die Dokumentation sortiert 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 finden es nicht in der öffentlichen API auf der Website der jQuery UI, aber es funktioniert wie ein Zauber.

76
Cory Danielson

Ich habe versucht, genau das zu erreichen, dh den Datepicker zu leeren, damit vom Benutzer eingegebene Filter entfernt werden können. Etwas googeln fand ich dieses süße Stück Code:

Sie können die Löschfunktion auch für schreibgeschützte Felder hinzufügen. Fügen Sie einfach den folgenden Code zu Ihrem Datepicker hinzu:

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

Personen können hervorheben (auch schreibgeschützte Felder) und dann mit der Rücktaste oder der Löschtaste das Datum mit der _clearDate-Funktion entfernen.

Quelle

78

Hast du versucht:

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

Das sollte laut der API Dokumentation funktionieren

53
DavidWainwright

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

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

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

21
Simon Wang
$('.date').datepicker('setDate', null);
12
Soni Sharma

Ändern Sie den Clearing-Code 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 );
});
10
j08691

Versuchen Sie Folgendes: Dies fügt dem Jquery-Kalender, der das Datum löscht, eine Schaltfläche zum Löschen hinzu. 

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

Setzen Sie die maximalen Datumsattribute in 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' );
3
Mark W

Die offensichtliche Antwort war die, die für mich funktionierte.

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

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

2
omarjebari
$("#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('');
            }
        }
    });
1
Jain Abhishek

Ich weiß, dass es ein bisschen zu spät ist, aber hier ist ein einfacher Code-Code, der es für mich tat:

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

Mein Weg, um dieses Problem zu lösen

Ändern Sie 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
            );
        }
    }
);

Ich verwende diesen Code, um das Feld und alle Shenannigans 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 würde .val('') für mich nicht funktionieren. Aber unter Umgehung von jQuery ist dies der Fall. Meiner Meinung nach ist es ein Fehler, dass es keine .datepicker-Option ('clear') gibt.

0
Tschallacka

Meine Initialisierung datepicker sieht folgendermaßen aus:

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

Die voreingestellte 'Done'-Taste hat also ' Clear ' -Text.

In datepicker.js finden Sie 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 Funktion hide wie folgt:

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

The solution came from this *data-handler="hide"*

0

Eine modifizierte Version der Lösung von Leniel Macaferi, bei der berücksichtigt wird, dass der Rücktaste in IE8 eine Verknüpfung "Zurück" ist, wenn ein Textfeld nicht den Fokus hat (was bei geöffnetem Datepicker der Fall zu sein scheint).

Es verwendet auch val(), um das Feld zu löschen, da _clearDate(this) für mich 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();
});
0
Kidquick

In Firefox erledigt es das Programm (programmgesteuert) für mich, 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
0
Isma