53 votes

Jquery UI datepicker date par défaut

J'ai un problème avec le datepicker Jquery UI, j'ai cherché et cherché mais je n'ai pas trouvé la réponse. J'ai le code suivant:

 <script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: '01-01-1985'
    });
});
</script>
 

Je veux que lorsque l'utilisateur clique dans l'entrée #birthdate que la date actuelle soit 01-01-1985, la date actuelle est maintenant réglée. Désolé pour ma question stupide.

52voto

Codesleuth Points 5443

Essayer de passer dans un Date objet à la place. Je ne vois pas pourquoi il ne fonctionne pas dans le format que vous avez saisi:

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985, 00, 01)
    });
});
</script>

http://api.jqueryui.com/datepicker/#option-defaultDate

Spécifier une date via un Objet Date ou chaîne dans le actuel dateFormat, ou un certain nombre de jours à partir d'aujourd'hui (par exemple, +7) ou une chaîne de caractères des valeurs et des périodes ("y" pendant des années, "m" pendant des mois, " w "pendant des semaines," d " pour jours, par exemple '+1m +7d), ou null pour aujourd'hui.

16voto

Umakanta.Swain Points 822

Vous pouvez essayer avec le code ci-dessous.

La date par défaut deviendra la date que vous recherchez.

 $('#birthdate').datepicker("setDate", new Date(1985,01,01) );
 

12voto

Shikiryu Points 6878

Voyant que

Régler la date pour mettre en surbrillance sur la première ouverture, si le champ est vide. Spécifiez une date réelle par l'intermédiaire d'un objet Date, ou comme une chaîne de caractères dans le courant dateFormat, ou un certain nombre de jours à partir d'aujourd'hui (par exemple, +7), ou une chaîne de valeurs et des périodes ("y" pendant des années, " m "pendant des mois," w "pendant des semaines," d " pour les jours, par exemple '+1m +7d), ou null pour aujourd'hui.

Si le courant dateFormat n'est-ce pas reconnaître, vous pouvez toujours utiliser l'objet Date ( a new Date(year, month, day)

Dans votre exemple, cela devrait fonctionner (je n'ai pas tester) :

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985,01,01)
    });
});
</script>

1voto

Synexis Points 303

jQuery UI Datepicker est codé de manière à toujours mettre en évidence la locale de l'utilisateur, la date à l'aide de la classe ui-state-highlight. Il n'y a pas de possibilité de changer cela.

Une méthode, décrite de la même façon dans d'autres réponses à des questions connexes, est de remplacer le CSS pour la classe pour correspondre ui-state-default de votre thème, par exemple:

.ui-state-highlight {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    color: #555555;
}

Cependant ce n'est pas très utile si vous utilisez des thèmes dynamiques, ou si votre intention est de mettre en évidence un autre jour (par exemple, pour avoir "aujourd'hui" sont fondées sur votre horloge du serveur plutôt que sur le client).

Une approche alternative est de remplacer le datepicker prototype qui est responsable pour la mise en évidence de la journée en cours.

En supposant que vous utilisez une version réduite de l'INTERFACE utilisateur javascript, les extraits suivants peuvent répondre à ces préoccupations.


Si votre objectif est de prévenir mettant en évidence la journée en cours tout à fait:

// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// remove the string "ui-state-highlight"
_generateHtml.toString().replace(' ui-state-highlight', '');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

Cela modifie le code correspondant (unminimized pour des raisons de lisibilité) à partir de:

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...]

pour

[...](printDate.getTime() == today.getTime() ? '' : '') + [...]

Si votre objectif est de changer le datepicker de la définition de "aujourd'hui":

var useMyDateNotYours = '07/28/2014';
// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// set "today" to your own Date()-compatible date
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

Cela modifie le code correspondant (unminimized pour des raisons de lisibilité) à partir de:

[...]var today = new Date();[...]

pour

[...]var today = new Date(useMyDateNotYours);[...]
// Note that in the minimized version, the line above take the form `L=new Date,`
// (part of a list of variable declarations, and Date is instantiated without parenthesis)

Au lieu de useMyDateNotYours vous pouvez bien sûr aussi au lieu d'injecter une chaîne de caractères, la fonction, ou ce qui convient à vos besoins.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X