Tempus Dominus Datetime Picker 如何设置值？

Question

使用来自 tempusdominus datepicker 的 v6

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

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

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

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

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

无法读取未定义的属性（读取“日期”）

第二次尝试：

基于文档https中提到的SetVal Function://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 不是 function

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

Answer 1

请注意setValue文档指出：

 setValue(value: DateTime, index?: number)

将 select 日期索引（或第一个，如果未提供）设置为提供的日期时间 object。

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

您可以使用DateTime function 从 JavaScript 日期获取DateTime.convert object。

此外，您不能直接从picker访问setValue和其他函数，而必须改用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 ），您可以使用toDate()从时刻 object 简单地获取本机 JavaScript 日期。

Answer 2

只需使用此代码.. 设置默认日期时间很简单，在这种情况下它是当前日期时间..干杯

const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
picker.dates.formatInput = date => moment(date).format('YYYY-MM-DD HH:mm')
picker.dates.setValue();