web-dev-qa-db-ja.com

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

私はbootstrap datepickerとラインハイチャートを使用しています。

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

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

ありがとう

jquerydatepickertwitter-bootstrap
65
corina mcintosh

これは私のために働く

$(".datepicker").datepicker("update", new Date());
66
Imran Rashid
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');
  1. プロパティの日付にカレンダーの日付を設定します
  2. アップデートしてください）
  3. 入力値を設定します（入力はdatepickerの子であることに注意してください）。

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

33
MG_
$("#datepicker").datepicker("setDate", new Date);
25
Nikhil

このコードを試して、

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

これにより、日付が更新され、形式dd/mm/yyyyも適用されます。

10
user6433435

これは私のために働く、

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

使用する方が良い：

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

の代わりに

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

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

8
Camille Muller

完全に機能させるには、「setValue」と「update」を行う必要がありました

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

それは本当に機能します。

シンプル、

わかりやすい、

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

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

更新する他の方法

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

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

3
A.J.

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

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

これで、オプションを失うことなく更新方法を使用できます。

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

Datetimepickersの場合、これを使用してください。

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

コードを使用：

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

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

説明：

Datepicker（入力フィールド）セレクター#datepicker。

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

オプションを更新してdatepickerを呼び出します。

2
Saurabh Srivastava

ForBootstrap 4

Bootstrapで入力グループを使用している場合は、テキストボックスの親に新しい日付を添付する必要があります。そうしないと、カレンダーアイコンをクリックして日付の外側をクリックするとクリアされます。

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

日付をinput-group.dateに設定する必要があります。

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

また、datepicker pdate methodを確認してください

2
kiranvj

これは私のために働く：

$('#dpStartDate').data("date", startDate);
1
N036
$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')
0
Hardik

@Imran回答はテキストボックスで機能します

日付ピッカーをdivに適用するには、これを使用します：

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

カンマ区切りの複数の日付：

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

https://github.com/smalot/bootstrap-datetimepicker を参照する場合、次の方法で日付値を設定する必要があります：$（ '＃datetimepicker1'）。data（ 'datetimepicker'）。setDate（新しい日付（値））;

0
winbill

次のような簡単な方法を使用できます。

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

この方法でもできます：

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

0
Sandeep Shekhawat

Bootstrap DatePickerバージョン4 + を使用している場合

注すべての機能は、データ属性を介してアクセスされます。 $（ '＃datetimepicker'）。data（ "DateTimePicker"）。FUNCTION（）

日付値を設定するには、コードは次のようにする必要があります

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

このような簡単な方法（1行）

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