javascript - Tempus Dominus 日期时间选择器 如何设置值？

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 中却出现错误:

无法读取未定义的属性(读取“日期”)

第二次尝试:

基于文档中提到的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 Date 获取 DateTime 对象功能。

此外，您无法访问 setValue 和其他 functions直接来自 picker，但您必须使用 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c6d9c4" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f342b3429" rel="noreferrer noopener nofollow">[email protected]</a>/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 )，并且您可以使用 toDate() 从 moment 对象简单地获取 native JavaScript 日期.