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

$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')

Answer 2

Si vous vous référez à https://github.com/smalot/bootstrap-datetimepicker Vous devez définir la valeur de la date par : $('#datetimepicker1').data('datetimepicker').setDate(new Date(value)) ;

Answer 3

Essayer

$("#datepicker").datepicker('setDate','25-05-2020').datepicker('fill');

Cela fonctionne pour moi lorsque setDate ne met pas à jour la valeur du champ texte du sélecteur de date dans le navigateur. "L'ajout d'un .datepicker('fill'); Repopulate the bootstrap " (repeupler la base d'amorçage) datepicker pour la nouvelle date qui est fixée par setDate méthode.

Answer 4

Au chargement de la page, si vous ne voulez pas déclencher l'événement changeDate, ce que je n'ai pas fait

$('#calendarDatePicker').data("date", new Date());
$('#calendarDatePicker').datapicker();

Answer 5

Cela fonctionne parfaitement pour moi. Il suffit de mettre le suivant.

$('.className').datepicker('setDate', 'now');