web-dev-qa-db-fra.com

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

Comment changer la date de sélection du sélecteur de date jquery de manière dynamique à la volée? J'ai dit créé un sélecteur de date en ligne. Ensuite, après un certain temps, je souhaite y refléter une date différente sans recréer le sélecteur de date.

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

Il existe un autre plugin (étendu?) ici , mais je souhaite utiliser le plugin fourni avec jquery.ui.all.js.

jquery-uidatepicker
114
Sabya

Quelle version de jQuery-UI utilisez-vous? J'ai testé les éléments suivants 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) );
173
Ben Koehler

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.

27
cfwall

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 à la date précédente.

selectedDate est une autre variable qui contient la date actuelle sélectionnée 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);
10
Vlad Bezden

Notez 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
Michael

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 sélecteur de date lui-même ne sera pas mis à jour, mais si vous cherchez simplement à 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
5
Guillaume Flandre
$('.date-pick').datePicker().val(new Date()).trigger('change')

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

3
Oleksii Semeniuk

C'est un vieux fil, mais je veux juste donner quelques informations sur la manière dont j'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 -/+, symbole du nombre de jours que vous souhaitez, comme ci-dessous.

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

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

2
Allen

Cela fonctionne pour moi:

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

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 celle-ci,

$('.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 );

(Dans cet attribut fromdate, les dates précédentes de la date actuelle sont affichées)

0
chamzz.dot

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, utilise la méthode dpSetSelected:

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

bonne chance!

0
tijs