web-dev-qa-db-ja.com

Tempus DominusのviewDate関数を使用したカレンダー値の設定

私がやろうとしているのは、イベントカレンダーの月と年をTempus Dominusの日付ピッカーに設定することです。したがって、メインページには大きなカレンダーがあり、ユーザーは月を11月から12月に変更し、12月に新しいイベントを作成できます。

ユーザーがボタンをクリックして新しいイベントを入力したら、日付ピッカーをその月に設定します。ページのドキュメントごとに、私は次の方法で関数にアクセスします。

_$('#datetimepicker').datetimepicker(FUNCTION)
_

viewDateを設定するには、日付を_()_に入れる必要があります__ viewDate('11/21/2018')日付をまとめます（次のようないくつかの異なる方法を試しました：

_$('#datetimepicker').datetimepicker(viewDate('11/21/2018'))
_

私はviewDateを一重引用符で囲み、_viewDate:_および他のいくつかを試しましたが、運がありませんでした。私は現在、それをボタンに接続していて、テストのために上記のように日付をハードコードしています。

私が理解していない、または間違っているのは何ですか？.

jquerydatetimepickertempus-dominus-datetimepicker
3
MaxThrust

viewDate 関数を呼び出す正しい方法は次のとおりだと思います：

$('#datetimepicker').datetimepicker('viewDate', <value>)

ここで、<value>は文字列（ format オプションに準拠）、モーメント、または日付の値です。

とにかく、Tempus Dominus datetimepickerの現在のバージョン（5.1.2）にバグ/問題があり、viewDateがコンポーネントビューに通知されないことを恐れています。

必要な場合は、dateの代わりにviewDateを使用してコンポーネントの値を変更できます。

ここにライブサンプルがあります：

$('#datetimepicker1').datetimepicker();

$('#btnViewDate').click(function() {
  $('#datetimepicker1').datetimepicker('viewDate', moment('11/21/2018', 'MM/DD/YYYY') );
});

$('#btnDate').click(function() {
  $('#datetimepicker1').datetimepicker('date', moment('11/21/2018', 'MM/DD/YYYY') );
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/tempusdominus-bootstrap-4.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/tempusdominus-bootstrap-4.js"></script>

<div class="container">
  <div class="row form-inline">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-2">
      <button type="button" class="btn btn-primary" id="btnViewDate">
        Set viewDate
      </button>
    </div>
    <div class="col-sm-2">
      <button type="button" class="btn btn-primary" id="btnDate">
        Set date
      </button>
    </div>
    
  </div>
</div>
5
VincenzoC