Die Schaltfläche Heute in jQuery Datepicker funktioniert nicht

Ich verwende jQueryUI Datepicker und zeige die Schaltfläche "Heute". Aber es funktioniert nicht. Es funktioniert auch nicht in der Demo: http://www.jqueryui.com/demos/datepicker/#buttonbar

Ich möchte die Eingabe mit heute füllen, wenn ich diese Taste drücke.

Ist es möglich, es zum Laufen zu bringen?

Ihr Code ist nicht wirklich kaputt. Es macht einfach nicht das, was die meisten Leute erwarten würden. Welches ist das heutige Datum in das Eingabefeld einzugeben. Dadurch wird hervorgehoben, dass der Benutzer das heutige Datum im Kalender sehen kann. Wenn sie in einem anderen Monat oder einem anderen Jahr ausgeschaltet waren, kehrt der Kalender zur heutigen Ansicht zurück, ohne das vom Benutzer bereits ausgewählte Datum abzuwählen.

Um es intuitiver zu gestalten, müssen Sie den Plugin-Code entsprechend Ihren Anforderungen aktualisieren. Lass mich wissen, wie es geht.

Sie benötigen die unkomprimierte Version des jquery-ui-Javascript. Ich schaue auf Version 1.7.2 und die Funktion "_gotoToday" befindet sich in Zeile 6760. Fügen Sie einfach einen Aufruf in diesen _gotoToday ein, der die Funktion _selectDate () in Zeile 6831 auslöst. :) Happy Coding.

Ich mag die Lösung zum Ändern des jQuery-Quellcodes nicht, weil dadurch die Möglichkeit zur Verwendung eines CDN entfällt. Stattdessen können Sie die Funktion _gotoToday neu zuweisen, indem Sie diesen Code basierend auf der Antwort von @meesterjeeves irgendwo in die JavaScript-Bereichsdatei Ihrer Seite aufnehmen:

$.datepicker._gotoToday = function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
            inst.selectedDay = inst.currentDay;
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;
            inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
            var date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
            // the below two lines are new
            this._setDateDatepicker(target, date);
            this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
}

Der obige Code entspricht im Wesentlichen dem jQuery UI Datepicker aus Version 1.10.1 mit Ausnahme der beiden oben markierten Zeilen. Das ganze Murmeln-Jumbo mit gotoCurrentkann tatsächlich entfernt werden, da diese Option mit unserer neuen Bedeutung von "heute" keinen Sinn ergibt.

Ich denke, der beste Weg, dies zu handhaben, besteht darin, die _goToToday-Methode außerhalb der Bibliothek selbst zu überschreiben. Dies löste das Problem für mich:

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
  old_goToToday.call(this,id)
  this._selectDate(id)
}

Einfach und erfordert nicht, dass Sie Ereignisse hacken oder zugrunde liegende Funktionen ändern

Fügen Sie einfach die folgenden zwei Codezeilen zur Funktion _gotoToday hinzu ...

/* Action for current link. */
_gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
        inst.selectedDay = inst.currentDay;
    inst.drawMonth = inst.selectedMonth = inst.currentMonth;
    inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
        var date = new Date();
        inst.selectedDay = date.getDate();
        inst.drawMonth = inst.selectedMonth = date.getMonth();
        inst.drawYear = inst.selectedYear = date.getFullYear();
    }
    this._notifyChange(inst);
    this._adjustDate(target);

    /* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
    this._setDateDatepicker(target, new Date());
    this._selectDate(id, this._getDateDatepicker(target));
},

Obwohl ich weiß, dass dies bereits akzeptiert wurde, ist hier meine erweiterte Lösung, die auf Samy Zines Idee basiert . Dies verwendete jQuery 1.6.3 und jQuery UI 1.8.16 und funktionierte für mich in Firefox 6.

$('.ui-datepicker-current').live('click', function() {
    // extract the unique ID assigned to the text input the datepicker is for
    // from the onclick attribute of the button
    var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
    // set the date for that input to today's date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});

Sie können auch wünschen blur()die $associatedInputund Fokus auf der nächsten Eingabe / wählen in Ihrer Seite, aber das ist nicht trivial allgemein zu tun, oder ist implementierungsspezifisch.

Als Beispiel habe ich dies auf einer Seite getan, an der ich an den verwendeten Tabellen für das Layout gearbeitet habe (fang nicht damit an, ich weiß, dass das eine schlechte Praxis ist!):

$associatedInput.closest('tr').next('tr').find('input,select').first().focus();

Sie sollten die todayBtnOption verwenden:

$("...").datepicker({
  todayBtn: "linked"
})

(statt todayBtn: true).

heuteBtn

Boolean, "verknüpft". Standard: false

Wenn true oder "verknüpft", wird am unteren Rand der Datumsauswahl eine Schaltfläche "Heute" angezeigt, um das aktuelle Datum auszuwählen. Wenn dies der Fall ist, wird mit der Schaltfläche "Heute" nur das aktuelle Datum angezeigt. Wenn "verknüpft", wird auch das aktuelle Datum ausgewählt.

Weitere Informationen finden Sie unter folgendem Link: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Ich mag die Idee nicht, jQuery-Quellcode zusätzlichen Code hinzuzufügen. Und ich möchte die _gotoTodayMethode nicht überschreiben , indem ich ihre Implementierung irgendwo in den Javascript-Code kopiere und unten zusätzliche Zeilen hinzufüge.

Also habe ich es mit diesem Code optimiert:

(function(){
    var original_gotoToday = $.datepicker._gotoToday;

    $.datepicker._gotoToday = function(id) {
        var target = $(id),
            inst = this._getInst(target[0]);

        original_gotoToday.call(this, id);
        this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    }
})();

Ich habe es gerade losgeworden.

In einer CSS-Datei, die Teil Ihrer Seite ist:

.ui-datepicker-current {
    visibility:hidden
}

In der Dokumentation steht, über welche Schaltfläche "Heute" welcher Titel geändert werden kann

.datepicker('option', 'currentText', 'New Title') 

ändert nur den angezeigten Monat auf aktuell. Dieses Verhalten kann auch konfiguriert werden

.datepicker('option', 'gotoCurrent', true);

Nach dem Drücken der Taste wird der angezeigte Monat in den ausgewählten Monat geändert.

Es scheint, dass das Senden eines Datums mit dieser Schaltfläche beabsichtigt ist.

Zu diesem Zweck habe ich dem Datepicker eine Option hinzugefügt: selectCurrent.

Um dasselbe zu tun, müssen Sie der unkomprimierten js-Datei nur Folgendes hinzufügen:

1) Fügen Sie gegen Ende der Funktion Datepicker () Folgendes hinzu:

selectCurrent: false // True to select the date automatically when the current button is clicked

2) Fügen Sie am Ende der Funktion _gotoToday Folgendes hinzu:

if (this._get(inst, 'selectCurrent'))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

Sie können auch den folgenden Code verwenden, um das aktuelle Datum in das Eingabefeld einzugeben, indem Sie auf die Schaltfläche Heute klicken. Fügen Sie einfach den folgenden Code in die _gotoTodayFunktion (am Ende der Funktion) ein jquery.ui.datepicker.js.

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

Bitte beachten Sie, dass ich Version 1.8.5 von jquery datepicker verwende.

jQuery UI Datepicker Today Link

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

Der Datepicker wird überarbeitet, um mindestens zehnmal besser zu sein. Die neue Version wird dieses Problem beheben.

http://wiki.jqueryui.com/w/page/12137778/Datepicker

Sie können auch versuchen, dies Ihrem Skript hinzuzufügen:

$('.ui-datepicker-current').live('click', function() {
       $(".datepicker").datepicker("setDate", date);
});

(Verwenden Sie die .live-Funktion und nicht .click)

Dies ist ein Hack, der für mich funktioniert hat und der die beforeShow-Rückruffunktion des Datepickers im Gegensatz zum live () -Ansatz verwendet.

     ,beforeShow: function(input, datepicker) {
         setTimeout(function() {
             datepicker.dpDiv.find('.ui-datepicker-current')
                .text('Select Today')
                .click(function() {
                     $(input)
                         .datepicker('setDate', new Date())
                         .datepicker('hide');
                });
         }, 1);
         return {};
     }

Dies ist ein einfacher Hack

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});

Ich habe es anders gelöst.

Ich finde es irritierend, zu einem Datum zu navigieren und dann daran zu denken, auf den Tag zu klicken, auch wenn er bereits ausgewählt ist (nachdem ich auf nächsten / vorherigen Monat geklickt habe).

Hier aktualisiere ich das Eingabefeld direkt, während wir uns durch die Monate / Jahre bewegen - was auch ausgelöst wird, wenn auf die Schaltfläche Heute geklickt wird. Ich brauche auch das Änderungsereignis, um ausgelöst zu werden, wenn sich die Auswahl geändert hat.

$input.datepicker({
    ...
    onChangeMonthYear: function (year, month, inst)
    {
        var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        if (!isNaN(date))
        {
            input.value = $.datepicker.formatDate("dd M yy", date);
            $input.change();
        }
    }
}

(Bitte beachten Sie, dass dies keine Frage ist. Ich versuche, durch die Bereitstellung meiner Lösung hilfreich zu sein, da die anderen Lösungen bei mir nicht funktioniert haben.)

Ich konnte den Datepicker nicht dazu bringen, sich bei einer der anderen Antworten zu verstecken. Der Kalender wird geschlossen und dann wieder geöffnet. Der folgende Code hat bei mir dazu beigetragen, die Schaltfläche Heute zu ändern, um das Datum auf den aktuellen Tag einzustellen und den Kalender zu schließen.

jQuery UI - v1.11.4 jQuery JavaScript Library v1.11.1 IE 11.0.28

Der Vollständigkeit halber habe ich meine Standardeinstellungen angegeben.

    $.datepicker._gotoToday = function(id) {
      var inst = this._getInst($(id)[0]);

      var date = new Date();
      this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
    }

    $.datepicker.setDefaults({
      changeMonth: true,
      maxDate: 'today',
      numberOfMonths: 1,
      showButtonPanel: true
    });