使用 Tempus Dominus 中的 viewDate 函数设置日历值

Question

我想要做的是将事件日历中的月份和年份设置为 Tempus Dominus 日期选择器。所以在主页上有一个大日历，用户可以将月份从 11 月更改为 12 月，并在 12 月创建一个新事件。

一旦用户单击按钮进入新事件，我想将日期选择器设置为那个月。根据页面上的文档，我通过以下方式访问函数：

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

要设置 viewDate 我需要将日期放入 () viewDate('11/21/2018') 把它放在一起（我尝试了几种不同的方式，它应该看起来像：

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

我已经将 viewDate 放在单引号中，尝试了 viewDate: 和其他几个，但没有成功。我目前将它连接到一个按钮并像上面那样对日期进行硬编码以进行测试。

有什么是我没理解或做错了。

Answer 1

我认为调用 viewDate 函数的正确方法是：

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

其中 <value> 是字符串（符合 format 选项）、时刻或日期值。

无论如何，我担心Tempus Dominus datetimepicker的当前版本（5.1.2）有一个bug/issue并且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/tempusdominus-bootstrap-4@5.1.2/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/tempusdominus-bootstrap-4@5.1.2/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>

使用 Tempus Dominus 中的 viewDate 函数设置日历值

Setting the calendar value using viewDate function in Tempus Dominus

jquery

datetimepicker

tempus-dominus-datetimepicker