jquery - bootstrap-datepicker の日付値を動的に設定する方法は?

Question

ラインハイチャートとともにブートストラップ日付ピッカーを使用しています。

チャートがズームされたときに日付ピッカーの日付を更新したい。そのイベントがトリガーされたら、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>

このコードを使用して値を更新しようとしました：

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

日付は正常に更新されますが、カレンダーは設定されません。

また、日付は更新しますがカレンダーは更新しない onChange イベントをトリガーしようとしました。

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

そのようにカレンダーを更新することさえ可能かどうか誰か知っていますか?

ありがとう

score 43 · Accepted Answer

var startDate = new Date();

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

別の方法

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

プロパティ data-date にカレンダーの日付を設定します
アップデートしてください）
入力値を設定します (入力は datepicker の子であることを思い出してください)。

このようにして、日付を「2012-08-08」に設定しています

score 30 · Accepted Answer

30

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

于 2013-08-09T09:31:33.833 に答える

score 15 · Accepted Answer

このコードを試して、

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

これにより、日付が更新され、フォーマットも適用さdd/mm/yyyyれます。

score 12 · Accepted Answer

使用する方が良い：

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

それ以外の

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

update を使用する場合、イベント changeDate はトリガーされません。

score 11 · Accepted Answer

これは私にとってはうまくいきます、

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

score 4 · Accepted Answer

他の回答の方法を使用すると、構成されたオプションが失われます。これを修正するには、グローバル構成を使用できます。

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

オプションを失わずに update メソッドを使用できるようになりました。

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

score 3 · Accepted Answer

それは本当にうまくいきます。

単純、

分かりやすく、

私のために働いたプラグインを設定および更新する単一の方法。

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

その他の更新方法

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

update手動で呼び出すことを忘れないでください。

score 3 · Accepted Answer

使用コード:

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

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

説明：

Datepicker(入力フィールド) セレクタ #datepicker.

入力フィールドを更新します。

オプション update で datepicker を呼び出します。

score 0 · Accepted Answer

次の方法でも実行できます。

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

score 0 · Accepted Answer

試す

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

これsetDateは、ブラウザで日付ピッカーのテキストフィールドの値を更新していないときに機能します。「追加」は、メソッドによって設定された新しい日付.datepicker('fill');のブートストラップを再設定します。datepickersetDate

score 0 · Accepted Answer

私がしなかったchangeDateイベントを発生させたくない場合は、ページの読み込み時に

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

jquery - bootstrap-datepicker の日付値を動的に設定する方法は?

25 に答える 25

Related

Reference