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

Voici une méthode simple (une ligne)

$('#startDateText').val(startDate).datepicker("update");

Answer 2

Cela fonctionne pour moi :

$('#dpStartDate').data("date", startDate);

Answer 3

Vous pouvez également procéder de cette manière :

  $("#startDateText").datepicker({
                toValue: function (date, format, language) {
                    var d = new Date(date);
                    d.setDate(d.getDate());
                    return new Date(d);
                },
                autoclose: true
            });

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format

Answer 4

@Imran la réponse fonctionne pour les zones de texte

pour appliquer le datepicker à une div, utilisez ceci :

$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");

les dates multiples délimitées par des virgules :

$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');

Answer 5

Vous pouvez utiliser cette méthode simple comme :

qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');