jQuery datepicker définit la date sélectionnée, à la volée


121

Comment puis-je changer la date sélectionnée du sélecteur de date jquery dynamiquement à la volée? J'ai dit créé un sélecteur de date en ligne. Ensuite, après un certain temps, je veux y refléter une date différente sans recréer le datepicker à partir de zéro.

J'ai essayé la méthode setDate, mais cela n'a pas fonctionné, et il n'y a pas beaucoup de documentation dans la doc .

Il y a un autre plugin (étendu?) Ici , mais je veux utiliser le plugin qui est livré avec jquery.ui.all.js.

Réponses:


187

Quelle version de jQuery-UI utilisez-vous? J'ai testé ce qui suit avec 1.6r6, 1.7 et 1.7.1 et cela fonctionne:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
utilisez defaultDate au lieu de setDate, si setDate ne fonctionne pas.
bingjie2680

8
mais pour moi, cela n'a pas fonctionné dans les deux cas, la date a été modifiée, mais la date sélectionnée n'apparaît pas dans le calendrier. il ne me montre qu'aujourd'hui mis en évidence.
Prageeth godage

28

Vérifiez que la date à laquelle vous essayez de la définir se situe dans la plage de dates autorisée si les options minDate ou maxDate sont définies.


10

Cet exemple montre comment utiliser la valeur par défaut dans le calendrier déroulant et la valeur dans la zone de texte. Il montre également comment définir la valeur par défaut sur la date précédente.

selectedDate est une autre variable qui contient la date sélectionnée actuelle du contrôle de calendrier

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

A noté que pour DatePicker de Keith Wood ( http://keith-wood.name/datepickRef.html ) les travaux suivants - notez que le réglage de la date par défaut est le dernier:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

Pour une raison quelconque, dans certains cas, je ne pouvais pas faire fonctionner setDate.

Une solution de contournement que j'ai trouvée consiste simplement à mettre à jour l'attribut value de l'entrée donnée. Bien sûr, le datepicker lui-même ne sera pas mis à jour, mais si ce que vous recherchez est d'afficher la date, cela fonctionne bien.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
Il y a un arrêt par un pendant des mois, vous avez donc besoin de (date.getMonth () + 1)
Adam

1
setDate ne fonctionne pas s'il est défini dans les options initiales, je l'ai ensuite enchaîné avec .datepicker ('setDate', ...)
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

enfin, c'est ce que je cherche depuis quelques heures! J'ai besoin d'initier les modifications, pas seulement la date de configuration dans le champ de texte!


2
Ça ne devrait .datepicker()pas être le cas.datePicker()
Arslan Tabassum

3

Ceci est un vieux fil, mais je veux juste donner quelques informations sur la façon dont je l'ai utilisé. Si vous souhaitez définir la date d'aujourd'hui, vous pouvez simplement l'appliquer comme ci-dessous.

 $("#datepickerid").datepicker("setDate", "0");

Si vous souhaitez définir quelques jours avant / après la date actuelle, utilisez le -/+symbole du nombre de jours souhaité comme ci-dessous.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate ne semble être un problème qu'avec un sélecteur de date en ligne utilisé dans l'interface utilisateur jquery, l'erreur spécifique est InternalError: trop de récursivité.


2

Cela fonctionne pour moi:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

En Html, vous pouvez ajouter votre champ de saisie avec un sélecteur de date comme celui-ci

<input class="form-control date-picker fromDates" id="myDate" type="text">

puis dans le script java, initialisez votre datepicker et définissez votre valeur sur la date comme ceci,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Ici, l'attribut fromdate montre les dates précédentes de la date actuelle)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

Les réponses au code uniquement sont déconseillées sur Stack Overflow car elles n'expliquent pas comment cela résout le problème. Veuillez modifier votre réponse pour expliquer ce que fait le code et comment il répond à la question, afin qu'il soit également utile pour les autres utilisateurs ainsi que pour l'OP.
FluffyKitten le

-1

J'ai également eu beaucoup de problèmes avec la méthode setDate. semble ne fonctionner que dans la v1. Ce qui semble fonctionner cependant, c'est d'utiliser la méthode dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

bonne chance!


-1

ou vous pouvez simplement avoir

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
Cela ne devrait .datepicker()pas être le cas .datePicker().
Florin Frătică
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.