Wie kann der Datumswert des Bootstrap-Datepickers dynamisch festgelegt werden?

Ich benutze Bootstrap Datepicker zusammen mit einem Line Highchart.

Ich möchte, dass das Datum der Datumsauswahl aktualisiert wird, wenn das Diagramm gezoomt wird. Sobald dieses Ereignis ausgelöst wird, aktualisiere ich die Werte des Datepickers. Die Werte werden problemlos aktualisiert, aber wenn auf den Kalender geklickt wird, ist das Datum im Popup-Kalender immer noch das alte Datum.

Hier ist mein 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>

Ich habe versucht, nur die Werte mit diesem Code zu aktualisieren:

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

Dadurch werden die Daten in Ordnung aktualisiert, der Kalender wird jedoch nicht festgelegt.

Ich habe auch versucht, das Ereignis onChange auszulösen, bei dem auch die Daten, jedoch nicht der Kalender aktualisiert werden:

$('#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();
    });

Weiß jemand, ob es überhaupt möglich ist, den Kalender so zu aktualisieren?

Vielen Dank

Das funktioniert bei mir

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

var startDate = new Date();

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

ein anderer Weg

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

1. Stellen Sie das Kalenderdatum auf das Datum der Eigenschaftsdaten ein
2. Aktualisierung erforderlich)
3. Stellen Sie den Eingabewert ein (denken Sie daran, dass die Eingabe dem Datepicker untergeordnet ist).

Auf diese Weise setzen Sie das Datum auf '2012-08-08'

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

Besser zu verwenden:

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

anstatt

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

Wenn Sie update verwenden, wird event changeDate nicht ausgelöst.

Versuchen Sie diesen Code,

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

Dadurch wird das Datum aktualisiert und das Format dd/mm/yyyyangewendet.

Das funktioniert bei mir,

$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));

Ich musste 'setValue' und 'update' ausführen, damit es vollständig funktioniert

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

Das funktioniert wirklich.

Einfach,

Einfach zu verstehen,

Einzelne Methode zum Einstellen und Aktualisieren des Plugins, die für mich funktioniert hat.

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

Andere Möglichkeiten zum Aktualisieren

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

Vergessen Sie nicht, updatemanuell anzurufen .

Für Bootstrap 4

Wenn Sie eine Eingabegruppe in Bootstrap verwenden, müssen Sie das neue Datum an das übergeordnete Element des Textfelds anhängen. Andernfalls wird das Datum gelöscht, wenn Sie auf das Kalendersymbol klicken und außerhalb des Datums klicken.

<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>

Sie müssen das Datum auf einstellen input-group.date.

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

Prüfen Sie auch , datepicker Update - Methode

Wenn Sie die Methoden anderer Antworten verwenden, gehen die konfigurierten Optionen verloren. Um dies zu korrigieren, können Sie eine globale Konfiguration verwenden:

$('.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;

Jetzt können Sie die Aktualisierungsmethode verwenden, ohne die Optionen zu verlieren:

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

Code verwenden:

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

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

Erläuterung:

Datepicker (Eingabefeld) Selector #datepicker.

Eingabefeld aktualisieren.

Rufen Sie den Datepicker mit Optionsaktualisierung auf.

Für Datetimepicker verwenden Sie diese Arbeit für mich

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

Beachten Sie, dass Sie beim Initiieren eines Datepickers mit einem benutzerdefinierten Format das einfache Zeichenfolgendatum als zweites Argument übergeben können. Dies spart einige Zeilen.

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

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

Einfacher Weg wie dieser (eine Zeile)

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

Das funktioniert bei mir:

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

$('#DateDepenseInput').val("2020-12-28")
Das Format sollte wie Jahr-Monat-Tag sein.
Es hat gut für mich funktioniert ...

Sie können dies auch folgendermaßen tun:

  $("#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

Sie können diese einfache Methode wie folgt verwenden:

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

Wenn Sie Bootstrap DatePicker Version 4+ verwenden

Hinweis Auf alle Funktionen wird über das Datenattribut zugegriffen, z. B. $ ('# datetimepicker'). Data ("DateTimePicker"). FUNCTION ()

Um den Datumswert einzustellen, sollten Ihre Codes wie folgt sein

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

@ Imran Antwort funktioniert für Textfelder

Um den Datepicker auf ein Div anzuwenden, verwenden Sie Folgendes:

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

Komma-Delim mehrere Daten:

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

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

Wenn Sie auf https://github.com/smalot/bootstrap-datetimepicker verweisen, müssen Sie den Datumswert wie folgt festlegen: $ ('# datetimepicker1'). Data ('datetimepicker'). SetDate (neues Datum (Wert));

Versuchen

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

Dies funktioniert bei mir, wenn setDateder Wert des Datumsauswahl-Textfelds im Browser nicht aktualisiert wird. "Die zusätzlichen .datepicker('fill');" füllen den Bootstrap datepickerfür ein neues Datum neu, das durch die setDateMethode festgelegt wird.

Beim Laden der Seite, wenn Sie das changeDate-Ereignis, das ich nicht ausgelöst habe, nicht auslösen möchten

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