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

Pour Bootstrap 4

Si vous utilisez un groupe de saisie dans Bootstrap, vous devez attacher la nouvelle date au parent de la boîte de texte, sinon si vous cliquez sur l'icône du calendrier et que vous cliquez à l'extérieur, la date sera effacée.

<div class="input-group date" id="my-date-component">
   <input type="text" />
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-calendar"></i></span>
    </div>
</div>

Vous devez fixer la date de input-group.date .

$('#my-date-component').datepicker("update", new Date("01/10/2014"));

Vérifier également le datepicker mise à jour méthode

Answer 2

Utilisez le code :

var startDate = "2019-03-12"; //Date Format YYYY-MM-DD

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

Explication :

Datepicker(input field) Selector #datepicker.

Mise à jour du champ de saisie.

Appeler le sélecteur de date avec la mise à jour de l'option.

Answer 3

Veuillez noter que si vous lancez un sélecteur de date avec un format personnalisé, vous pouvez passer la simple chaîne de caractères date comme deuxième argument. Cela permet d'économiser quelques lignes.

$('.selector').datepicker({
    format:'dd/mm/yyyy',
});

$('.selector').datepicker('update', '13/09/2019');

Answer 4

$('#DateDepenseInput').val("2020-12-28")
le format doit être le suivant : année-mois-jour
Cela a bien fonctionné pour moi ...

Answer 5

Si vous utilisez Bootstrap DatePicker version 4+

Note Toutes les fonctions sont accessibles via l'attribut data, par exemple $('#datetimepicker').data("DateTimePicker").FUNCTION()

Pour définir la valeur de la date, vos codes devraient être les suivants

$("#datetimepicker").data("DateTimePicker").date(new Date());