Tempus Dominus Datetime Picker 如何设置值？

Question

使用来自 tempusdominus 日期选择器的 v6

参考：https://getdatepicker.com/6/functions.html

我已经尝试了很多函数函数试图为日期时间选择器设置一个值但是没有任何效果，在我的尝试之下：

var DateTimeVal = moment('05/07/2022 00:00').format('MM/DD/YYYY HH:mm');

$('#DateTime').data("DateTimePicker").date(DateTimeVal);

以上示例在以前的版本 (4) 中有效，但在 V6 中出现错误：

无法读取未定义的属性（正在读取 'date'）

第二次尝试：

基于文档中提到的 SetVal 函数 https://getdatepicker.com/6/functions.html

var DateTimeVal = moment('05/07/2022 00:00').format('MM/DD/YYYY HH:mm');

const picker = new tempusDominus.TempusDominus(document.getElementById('DateTime'));

picker.setValue(DateTimeVal);

出现错误：

picker.setValue 不是函数

你能帮忙吗？由于提到的样本在他们的官方网站上不清楚...

Answer 1

请注意 setValue 文档指出：

setValue(value: DateTime, index?: number)
Sets the select date index (or the first, if not provided) to the provided DateTime object.

所以您需要传递给 setValue 的参数应该是 DateTime 而在您的示例中您使用的是字符串。

您可以使用 DateTime.convert 函数从 JavaScript 日期获取 DateTime 对象。

此外，您无法直接从 picker 访问 setValue 和其他 functions，而必须使用 picker.dates。

工作示例：

const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));

var DateTimeVal = moment('02/02/2022 00:00', 'MM/DD/YYYY HH:mm').toDate();

picker.dates.setValue(tempusDominus.DateTime.convert(DateTimeVal));

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.1/umd/popper.min.js" integrity="sha512-8jeQKzUKh/0pqnK24AfqZYxlQ8JdQjl9gGONwGwKbJiEaAPkD3eoIjz3IuX4IrP+dnxkchGUeWdXLazLHin+UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

<!-- Font awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/solid.min.js" integrity="sha512-C92U8X5fKxCN7C6A/AttDsqXQiB7gxwvg/9JCxcqR6KV+F0nvMBwL4wuQc+PwCfQGfazIe7Cm5g0VaHaoZ/BOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/fontawesome.min.js" integrity="sha512-5qbIAL4qJ/FSsWfIq5Pd0qbqoZpk5NcUVeAAREV2Li4EKzyJDEGlADHhHOSSCw0tHP7z3Q4hNHJXa81P92borQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Tempus dominus -->
<script src="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/js/tempus-dominus.js"></script>
<link href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/css/tempus-dominus.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <label for="datetimepicker1Input" class="form-label">Simple picker</label>
      <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
        <input id="datetimepicker1Input" type="text" class="form-control" data-td-target="#datetimepicker1" />
        <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
          <span class="fa-solid fa-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>

请注意，在 moment.js 中解析非 ISO 8601 字符串时应指定格式（参见 String + Format) and you can simply get a native JavaScript Date from a moment object using toDate()。

Tempus Dominus Datetime Picker 如何设置值？

Tempus Dominus Datetime Picker How to set value?

javascript

datetimepicker

bootstrap-datetimepicker

eonasdan-datetimepicker