Le bouton Aujourd'hui dans jQuery Datepicker ne fonctionne pas

Question

J'utilise jQueryUI Datepicker et affiche le bouton "Aujourd'hui". Mais ça ne marche pas. Cela ne fonctionne pas non plus en démo: http://www.jqueryui.com/demos/datepicker/#buttonbar

Je veux remplir l'entrée avec aujourd'hui lorsque vous appuyez sur ce bouton.

Est-il possible de le faire fonctionner?

Answer 1

Je n'aime pas la solution de modifier le jQuery, le code source, car elle élimine la possibilité d'utiliser un CDN. Au lieu de cela, vous pouvez réattribuer la _gotoToday fonction en incluant ce code (basé sur @meesterjeeves réponse) quelque part dans votre page JavaScript portée fichier:

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

Le code ci-dessus est essentiellement le même que le jQuery UI Datepicker à partir de la version 1.10.1 sauf pour les deux lignes ci-dessus. L'ensemble de mumble-jumbo avec gotoCurrent peut effectivement être enlevés depuis que l'option n'a pas de sens avec notre nouveau sens au mot "aujourd'hui".

Answer 2

Leur code n'est pas vraiment cassé. Il n'a tout simplement pas faire ce que la plupart des gens s'attendent à ce qu'il fasse. Qui est d'entrer la date du jour dans la zone de saisie. Ce qu'elle ne fait que mettre en évidence, pour l'utilisateur de voir la date sur le calendrier. Si on partait dans un mois ou une année, le calendrier pop de retour à aujourd'hui sans décocher la date à laquelle l'utilisateur est déjà sélectionné.

Pour le rendre plus intuitif, vous aurez besoin de mettre à jour le code du plugin pour répondre à vos besoins. Permettez-moi de savoir comment il va.

Vous aurez besoin pour obtenir la version non compressée du jquery-ui javascript. Je suis à la recherche à la version 1.7.2 et le "_gotoToday" la fonction est en ligne sur 6760. Il suffit d'ajouter un appel dans ce _gotoToday qui déclenche la _selectDate() la fonction sur la ligne 6831. :) Heureux De Codage.

Answer 3

Je pense que la meilleure façon de gérer cela est de remplacer la méthode _goToToday en dehors de la bibliothèque elle-même. Cela a résolu le problème pour moi:

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

Simple et ne nécessite pas de pirater des événements ou de modifier les fonctionnalités sous-jacentes

Answer 4

Ajoutez simplement les deux lignes de code suivantes à la fonction _gotoToday ...

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

Answer 5

Même si je sais que cela a déjà été acceptée, voici mon élargi solution basée sur Samy Zine de l'idée. Ce fut à l'aide de jQuery 1.6.3 et jQuery UI 1.8.16, et a travaillé pour moi dans 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");
});

Vous pouvez également blur() le $associatedInput et de se concentrer sur la prochaine entrée/sélectionner dans votre page, mais ce n'est pas trivial à faire de façon générique, ou est spécifique à l'implémentation.

Comme un exemple, j'ai fait ça sur une page que je travaillais sur les tables utilisées pour la mise en page (ne me lancez pas, je sais que c'est une mauvaise pratique!):

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