Comment définir dynamiquement la valeur de la date de bootstrap-datepicker ?

Question

J'utilise un datepicker bootstrap ainsi qu'un highchart en ligne.

Je veux que la date du datepicker soit mise à jour lorsque le graphique est zoomé. Une fois cet événement déclenché, je mets à jour les valeurs du sélecteur de date. Les valeurs sont bien mises à jour, mais lorsque l'on clique sur le calendrier, la date affichée dans le calendrier contextuel est toujours l'ancienne.

Voici mon datepicker :

<div class="input-append date pull-right" id="dpStartDate" data-date="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy">
    <input class="span2" id="startDateText" size="16" type="text" value="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" readonly="">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

J'ai essayé de mettre à jour les valeurs à l'aide de ce code :

$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);

qui met à jour les dates sans problème mais n'active pas le calendrier.

J'ai également essayé de déclencher l'événement onChange, qui met également à jour les dates mais pas le calendrier :

$('#dpStartDate').trigger('changeDate', startDate);

$('#dpStartDate').datepicker()
    .on('show', function (ev) {
        ev.stopPropagation();
    })
    .on('changeDate', function (ev, date) {
        var startDate = new Date();
        if (date != undefined) {
            startDate = date;
            $('#dpStartDate').attr('data-date', startDate);
            $('#startDateText').attr('value', startDate);
        }
        else {
            startDate = ev.date;
            $('#dpStartDate').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
            $('#startDateText').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
        }
        $('#dpStartDate').datepicker('hide');
        ev.stopPropagation();
    });

Quelqu'un sait-il s'il est possible de mettre à jour le calendrier de cette manière ?

Gracias

Answer 1

Cela fonctionne pour moi

$(".datepicker").datepicker("update", new Date());

Answer 2

var startDate = new Date();

$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);

une autre voie

$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');

1. fixer la date du calendrier sur le bien data-date
2. mise à jour (obligatoire)
3. définir la valeur de l'entrée (n'oubliez pas que l'entrée est un enfant du sélecteur de date).

de cette manière, vous fixez la date à '2012-08-08'

Answer 3

$("#datepicker").datepicker("setDate", new Date);

Answer 4

Essayez ce code,

$(".endDate").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true
}).datepicker("update", "10/10/2016"); 

Cela permet de mettre à jour la date et d'appliquer le format dd/mm/yyyy également.

Answer 5

Mieux vaut utiliser :

$("#datepicker").datepicker("setDate", new Date); 

au lieu de

$("#datepicker").datepicker("update", new Date);

Si vous utilisez update, l'événement changeDate n'est pas déclenché.