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("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));

Answer 2

J'ai dû faire "setValue" et "update" pour que cela fonctionne complètement.

$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');

Answer 3

En utilisant les méthodes des autres réponses, les options configurées sont perdues, pour y remédier, vous pouvez utiliser une configuration globale :

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Vous pouvez désormais utiliser la méthode de mise à jour sans perdre les options :

$(".datepicker").datepicker("update", new Date("30/11/2018"));

Answer 4

Cela fonctionne vraiment.

Simple,

Facile à comprendre,

Une seule méthode pour configurer et mettre à jour le plugin qui a fonctionné pour moi.

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

Autres moyens de mise à jour

$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');

N'oubliez pas d'appeler update manuellement.

Answer 5

Pour les adeptes du choix de la date, voici ce qui fonctionne pour moi

$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');