Die Schaltfläche Heute in jQuery Datepicker funktioniert nicht

Antworten:

45

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.

— DMCS
quelle
20
Ich mag die Lösung zum Ändern des jQuery-Quellcodes nicht, weil dadurch die Möglichkeit zur Verwendung eines CDN entfällt. In meiner Antwort erfahren Sie, wie Sie die Funktion _gotoToday ändern können, ohne die Plugin-Codedatei zu ändern. (Ich hätte dies eher als Kommentar als als Antwort behalten, wenn Kommentare Syntaxhervorhebungen enthalten könnten)
— Walter Stabosz
Ich mag GregLs Vorschlag besser.
— Chris Morley
@ WalterStaboszcomments can include syntax highlighting
— Adrien Be
@AdrienBe danke, das wusste ich 2011 nicht ... Ich würde es beheben, aber SO erlaubt es nur, Kommentare für 5 Minuten zu bearbeiten, nachdem sie veröffentlicht wurden :)
— Walter Stabosz
4
<light-hearted-sarcasm>"Ihr Code ist nicht wirklich kaputt. Er macht einfach nicht das, was die meisten Leute erwarten würden" - nach Meinung der meisten Leute ist dies die Definition von kaputt ;-)</light-hearted-sarcasm>
— scunliffe
86

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.

— Walter Stabosz
quelle
Ich verwende es mit jquery-1.6.2.min.js und /1.8.15/jquery-ui.min.js, die nicht die neuesten Versionen sind. In den neuen Versionen wurden möglicherweise Codeänderungen vorgenommen, die diesen Hack unterbrechen.
— Walter Stabosz
1
Vielen Dank. Ich habe alle möglichen Möglichkeiten ausprobiert, um die Schaltfläche "Heute" im IE so zu verhalten, aber nur Ihre hat funktioniert.
— Bogdan
Dies funktioniert für mich in IE 7 und höher sowie in Firefox und Chrome.
— Marcus
Vielen Dank. Ich habe nach einer Lösung für dieses Problem gesucht.
— mjb
20
Diese viel kürzere Version funktionierte für mich (auf v1.10.3):$.datepicker._gotoToday = function (id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); };
— sinelaw
26

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

— Dave
quelle
Kleiner Buggy (Kalender wird erst wieder angezeigt, wenn der Fokus entfernt wird), funktioniert aber ansonsten hervorragend.
— Mansfield
Mit 1.10.2 und funktioniert hervorragend. Fügte es in meiner Shim-Konfiguration auf init für requirejs hinzu: shim: { 'datepicker': { deps: ['jquery','ui_core'], init: function ($, core) { var oldGoToToday = $.datepicker._gotoToday $.datepicker._gotoToday = function(id) { oldGoToToday.call(this, id); this._selectDate(id); }; } }, }
— johnofcross
Dies hat bei mir funktioniert. Das Problem mit dem Fokus war kein Problem, da ich die Option zum Öffnen nur beim Klicken auf ein Symbol verwende. Wenn jedoch jemand anderes an Problemen mit Fokus und Stil arbeitet, finden Sie hier weitere Antworten: stackoverflow.com/questions/3139237/…
— Eselk
2
Wenn Ihnen diese Lösung gefällt und Sie möchten, dass die Eingabe auch den Fokus verliert, fügen Sie sie einfach $(id).blur();nachher hinzu this._selectDate(id).
— itslittlejohn
1
@itslittlejohn: Toller Tipp; IE 11 und niedriger benötigen leider eine zusätzliche Optimierung, da sonst der Dialog sofort wieder angezeigt wird: Anhängen $(id).datepicker('option', 'showOn', null); setTimeout(function () { $(id).datepicker('option', 'showOn', 'focus') }), um die Datumsauswahl vorübergehend zu deaktivieren und nach Abschluss der blurEreignisverarbeitung wieder zu aktivieren .
— mklement0
9

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

— meesterjeeves
quelle
9

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();
— GregL
quelle
1
Update: Ich habe hier im IE (die meisten Versionen) tatsächlich Probleme mit meiner Lösung gefunden. Am Ende habe ich mich stattdessen für Walter Stabosz entschieden, der sowohl im IE (als auch in anderen Browsern) funktioniert hat.
— GregL
9

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

— Judian
quelle
Beachten Sie, dass dies für den Bootstrap-Datepicker gilt, nicht für den jQuery UI-Datepicker, nach dem der Fragesteller gesucht hat.
— Gavin.Paolucci.Kleinow
1
Obwohl sich diese Antwort auf den falschen Datepicker bezieht, habe ich mir tatsächlich den Bootstrap-Datepicker angesehen und diese Antwort gefunden, die mein Problem behoben hat! Danke: D
— mikeyq6
7

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));
    }
})();
— Aliona
quelle
3

Ich habe es gerade losgeworden.

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

.ui-datepicker-current {
    visibility:hidden
}
— BillB
quelle
1
Es macht keinen Sinn, dies so zu tun, da Sie einfach die Option zum Ausblenden der Schaltflächen übergeben können. showButtonPanel:false- und das ist sowieso der Standardwert.
— CBarr
2
Nein, da er nur die Schaltfläche Heute versteckt hat, nicht die Schaltfläche Fertig.
— Markos Fragkakis
2

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.

— Alexander Prokofyev
quelle
Vielen Dank, es hat mich viele Male gerettet.
— Khanh Pham
2

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));
— Fabrice
quelle
2

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.

— Sandip Panchal
quelle
2

jQuery UI Datepicker Today Link

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

— Mati Horovitz
quelle
Dadurch wird das aktuelle Datum korrekt eingestellt, aber das Datumsauswahl-Popup wird nach dem Einstellen erneut geöffnet.
— Gaʀʀʏ
2 

$.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
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">
Erweitern Sie das Snippet

— rmw
quelle
1

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)

— Samy Zine
quelle
1

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 {};
     }
— Clayton
quelle
Dies funktioniert nur, solange Sie den Monat / das Jahr im Kalender nie ändern. Wenn Sie den Monat einmal ändern, funktioniert die Schaltfläche Heute wie gewohnt.
— Tenerezza
1

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

});
— rvirk
quelle
0

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();
        }
    }
}
— Etherman
quelle
-1

(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
    });
Erweitern Sie das Snippet

— Mont
quelle
Der Antwortbereich ist für Antworten gedacht, nicht für Folgefragen. Bitte erwägen Sie, dies als Frage (Verknüpfung mit dieser Frage) oder als Kommentar zu der Frage oder einer der vorhandenen Antworten zu veröffentlichen.
— Mech
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.