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.

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

Hast du versucht:

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

Das sollte gemäß der API-Dokumentation funktionieren

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/

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

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

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

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

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

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

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

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

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

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

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.

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

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

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