web-dev-qa-db-fra.com

Le bouton Aujourd'hui dans jQuery Datepicker ne fonctionne pas

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 aujourd'hui en appuyant sur ce bouton.

Est-il possible de le faire fonctionner?

jquery-uidatepicker
65
Chuprin

Leur code n'est pas vraiment cassé. Il ne fait tout simplement pas ce que la plupart des gens s'attendent à ce qu'il fasse. Ce qui est d'entrer la date d'aujourd'hui dans la zone de saisie. Ce qu'il fait, c'est mettre en évidence pour l'utilisateur de voir la date d'aujourd'hui sur le calendrier. S'ils étaient désactivés dans un autre mois ou une autre année, le calendrier revient à la vue du jour sans désélectionner la date que l'utilisateur a déjà sélectionnée.

Pour le rendre plus intuitif, vous devrez mettre à jour le code du plugin en fonction de vos besoins. Dites-moi comment ça se passe.

Vous aurez besoin d'obtenir la version non compressée du javery jquery-ui. Je regarde la version 1.7.2 et la fonction "_gotoToday" est sur la ligne 6760. Ajoutez simplement un appel dans ce _gotoToday qui déclenche la fonction _selectDate () sur la ligne 6831. :) Happy Coding.

40
DMCS

Je n'aime pas la solution de modifier le code source jQuery car il supprime la possibilité d'utiliser un CDN. Au lieu de cela, vous pouvez réaffecter la fonction _gotoToday en incluant ce code basé sur @ meesterjeeves answer quelque part dans le fichier d'étendue JavaScript de votre page:

$.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 de la version 1.10.1 à l'exception des deux lignes marquées ci-dessus. L'ensemble du marmonnement-jumbo avec gotoCurrent peut en fait être supprimé car cette option n'a pas de sens avec notre nouvelle signification de "aujourd'hui".

84
Walter Stabosz

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 vous oblige pas à pirater des événements ou à modifier une fonctionnalité sous-jacente

26
Dave

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

Bien que je sache que cela a déjà été accepté, voici ma solution étendue basée sur l'idée de Samy Zine . Cela utilisait jQuery 1.6.3 et jQuery UI 1.8.16, et fonctionnait 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 souhaiter blur() le $associatedInput Et vous concentrer sur la prochaine entrée/sélection dans votre page, mais ce n'est pas trivial à faire de manière générique, ou est spécifique à l'implémentation.

Par exemple, je l'ai fait sur une page sur laquelle je travaillais et qui utilisait des tableaux 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();
9
GregL

Je n'aime pas l'idée d'ajouter du code supplémentaire au code source de jQuery. Et je ne veux pas remplacer _gotoToday méthode en copiant-collant son implémentation quelque part dans le code javascript et en ajoutant des lignes supplémentaires en bas.

Donc, je l'ai modifié en utilisant ce code:

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

Vous devez utiliser l'option todayBtn:

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

(au lieu de todayBtn: true).

todayBtn

Booléen, "lié". Par défaut: faux

Si vrai ou "lié", affiche un bouton "Aujourd'hui" au bas du sélecteur de date pour sélectionner la date actuelle. Si vrai, le bouton "Aujourd'hui" ne fera que déplacer la date actuelle dans la vue; si "lié", la date actuelle sera également sélectionnée.

Pour plus de détails, consultez le lien suivant: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

5
judian
$.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">
2
rmw

Je viens de m'en débarrasser.

Dans un fichier CSS qui fait partie de votre page:

.ui-datepicker-current {
    visibility:hidden
}
2
BillB

jQuery UI Datepicker Today Link

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

2
Mati Horovitz

La documentation indique quel bouton "aujourd'hui" dont le titre pourrait être modifié via

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

change uniquement le mois affiché en courant. Ce comportement pourrait également être configuré

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

Après cela, appuyer sur le bouton changera le mois affiché en celui de la date sélectionnée.

Il semble que soumettre une date avec ce bouton est impossible par conception.

2
Alexander Prokofyev

Vous pouvez également essayer le code ci-dessous pour remplir la date actuelle dans la zone de saisie en cliquant sur le bouton Aujourd'hui. Mettez simplement le code ci-dessous dans le _gotoToday fonction (à la fin de la fonction) dans jquery.ui.datepicker.js.

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

Veuillez noter que j'utilise la version 1.8.5 de jquery datepicker.

2
Sandip Panchal

J'ai ajouté une option au sélecteur de date à cet effet: sélectionnez Actuel.

Pour faire de même, il vous suffit d'ajouter les éléments suivants au fichier js non compressé:

1) Vers la fin de la fonction Datepicker (), ajoutez:

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

2) À la fin de la fonction _gotoToday, ajoutez:

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

C'est un hack qui a fonctionné pour moi qui utilise la fonction de rappel beforeShow du Datepicker par opposition à l'approche live ().

     ,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 {};
     }
1
Clayton

Le sélecteur de date est en cours de refonte pour être au moins 10 fois plus génial. La nouvelle version résoudra ce problème.

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

1
Bryan Downing

Vous pouvez également essayer d'ajouter ceci à votre script:

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

(utilisez la fonction .live et non .click)

1
Samy Zine

C'est un simple 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
});

});
1
rvirk

Je l'ai résolu d'une manière différente.

Je trouve irritant de naviguer vers une date, puis de ne pas oublier de cliquer sur le jour même s'il est déjà sélectionné (après avoir cliqué sur le mois suivant/précédent).

Ici, je mets à jour le champ de saisie au fur et à mesure que nous nous déplaçons au cours des mois/années - qui se déclenche également lorsque le bouton Aujourd'hui est cliqué. J'ai également besoin que l'événement change se déclenche chaque fois que la sélection a changé.

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