web-dev-qa-db-fra.com

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 souhaite que lorsque l'utilisateur clique sur l'entrée #birthdate Que la date actuelle soit sélectionnée pour être 01-01-1985, La date actuelle est désormais définie.

jqueryjquery-ui-datepicker
50
Alesio

Essayez plutôt de passer à un objet Date. Je ne vois pas pourquoi cela ne fonctionne pas dans le format que vous avez entré:

<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écifiez une date réelle via un objet Date ou une chaîne dans le dateFormat actuel, ou un nombre de jours à compter de ce jour (par exemple +7) ou un Chaîne de valeurs et de périodes ('y' pour les années, 'm' pour les mois, 'w' pour les semaines, 'd' pour les jours, par exemple '+ 1m + 7d') ou nul pour aujourd'hui.

48
Codesleuth

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) );
14
Umakanta.Swain

Vu que:

Définissez la date à mettre en surbrillance lors de la première ouverture si le champ est vide. Spécifiez soit une date réelle via un objet Date, soit une chaîne dans le dateFormat actuel, soit un nombre de jours à compter d'aujourd'hui (par exemple, +7) ou une chaîne de valeurs et de périodes ('y' pour les années, 'm' pour les mois, 'w' pour les semaines, 'd' pour les jours, par exemple '+ 1m + 7d') ou nul pour aujourd'hui.

Si le dateFormat actuel n'est pas reconnu, vous pouvez toujours utiliser l'objet Date à l'aide de new Date(year, month, day)

Dans votre exemple, cela devrait fonctionner (je ne l'ai pas testé):

<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>
11
Shikiryu

Si vous souhaitez mettre à jour le jour en surbrillance sur un autre jour en fonction de l'heure du serveur, vous pouvez remplacer le code du sélecteur de dates pour autoriser une nouvelle option personnalisée nommée localToday ou peu importe le nom que vous souhaitez lui donner.

Un petit Tweak à la réponse sélectionnée dans la datePicker de jQuery UI change avec la date "aujourd'hui"

// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow

// Pass the today date to datepicker
$( "#datepicker" ).datepicker({
    showButtonPanel: true,
    localToday: localToday    // This option determines the highlighted today date
});

J'ai remplacé 2 méthodes datepicker pour utiliser de manière conditionnelle un nouveau paramètre pour la date "aujourd'hui" au lieu d'une new Date(). Le nouveau paramètre s'appelle localToday.

Remplacez $.datepicker._gotoToday Et $.datepicker._generateHTML Comme ceci:

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}

Voici une démo qui affiche le code complet et son utilisation: http : //jsfiddle.net/NAzz7/5/

1
Cory Danielson

Jquery Datepicker defaultDate SEULEMENT pour définir la date par défaut que vous avez choisie dans le calendrier qui s’affiche lorsque vous cliquez sur votre champ. Si vous souhaitez que la date par défaut apparaisse sur votre entrée avant que l'utilisateur clique sur le champ, vous devez lui attribuer un val (). Quelque chose comme ça:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" });
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1));
1
user3378165

jQuery UI Datepicker est codé pour toujours mettre en évidence la date locale de l'utilisateur à l'aide de la classe ui-state-highlight. Il n'y a pas d'option intégrée pour changer cela.

Une méthode, décrite de manière similaire dans d’autres réponses à des questions connexes, consiste à remplacer le code CSS de cette classe par 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;
}

Toutefois, cela n’est pas très utile si vous utilisez des thèmes dynamiques ou si votre intention est de mettre en valeur un jour différent (par exemple, d’avoir "aujourd’hui" basé sur l’horloge de votre serveur plutôt que sur celle du client).

Une autre approche consiste à remplacer le prototype datepicker chargé de mettre en évidence le jour actuel.

En supposant que vous utilisiez une version réduite du javascript de l'interface utilisateur, les extraits suivants peuvent résoudre ces problèmes.

Si votre objectif est d'empêcher de mettre en évidence le jour actuel:

// 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 pertinent (sans limite de lisibilité) de:

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

à

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

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

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 pertinent (sans limite de lisibilité) de:

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

à

[...]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 injecter une chaîne, une fonction ou tout ce qui vous convient.

1
Synexis