jQuery UI Datepicker Today Link

Question

J'utilise jQuery UI Datepicker pour un projet, mais j'ai besoin du bouton aujourd'hui pour entrer la date dans le champ de texte lorsqu'un utilisateur clique dessus. Par défaut, il sélectionne simplement la date mais ne l'inscrit pas dans le champ. Je suppose que cela nécessitera juste un mod rapide de mon fichier jQuery UI, mais qu'est-ce que je change? Merci.

Editer: J'ai essayé ceci: http://dev.jqueryui.com/ticket/4045 mais ça ne marche pas!

Answer 1

J'ai trouvé une solution qui fonctionne ici: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button. Il suffit d'utiliser ce bout de jQuery (je l'ai mis dans mon datepicker code init):

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

Le seul problème que j'avais été que l'accent resterait dans la zone d'entrée après avoir cliqué sur le bouton « aujourd'hui », ce qui signifie vous ne pouvez pas cliquer à nouveau pour sélectionner une date différente. Cela peut être corrigé par suffixant flou():

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

Je n'ai pas aimé le style sur le bouton « aujourd'hui » - peut-être était mon thème ou quelque chose, mais le bouton aujourd'hui était un peu grisés par rapport au bouton "fait". Cela peut être corrigé avec le CSS suivant (peut varier selon les différents thèmes, je ne suis pas sûr):

/* This edit gives five levels of specificity, thus making it override other styles */ 
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current { 
    font-weight: bold; 
    opacity: 1; 
    filter:Alpha(Opacity=100); 
} 

Answer 2

Je sais que cela est en quelque sorte une réponse tardive, mais je couru pour cette question et la solution Des œuvres prouvées comme un charme. Toutefois, le problème de style de bouton est dû aux classes ui jQuery. J'ai ajouté le code suivant à l'action de clic du texte d'entrée Date:

$('.date').click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 

Cela supprime la mauvaise classe, et ajoute la bonne classe au bouton, ce qui en fait le même que le bouton « Terminé ». Peu importe le thème que vous utilisez. Pour être complet, voici mon code entier:

$('.date').datepicker({ 
    dateFormat: 'yy-mm-dd', 
    showButtonPanel: true 
}).click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 
$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); 
}); 

Il suffit d'ajouter un <input type="text" class="date" value="" />, et vous êtes bon pour aller.