Tempus Dominus Datetime Picker 如何设置值？

Question

Using v6 from tempusdominus datepicker

Reference: https://getdatepicker.com/6/functions.html

I have tried many function function trying to set a value to the datetime picker but nothing is working,, below my tries:

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

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

The above sample was working in previous version (4) but in V6 it's giving error:

Cannot read properties of undefined (reading 'date')

2nd try:

Based on the SetVal Function mentioned in the documentation 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);

It's giving error:

picker.setValue is not a function

Would you please assist? as the mentioned samples not clear in their official website...

Answer 1

Please note that the setValue docs states:

 setValue(value: DateTime, index?: number)

Sets the select date index (or the first, if not provided) to the provided DateTime object.

so the parameter that you need to pass to setValue should be a DateTime while in your sample you are using a string.

You can get a DateTime object from a JavaScript Date using DateTime.convert function.

Moreover, you can't access to setValue and other functions directly from picker , but you have to use picker.dates instead.

Working example:

 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>

Please note that you should specify format when parsing non ISO 8601 string in moment.js (see String + Format ) and you can simply get a native JavaScript Date from a moment object using toDate() .

Answer 2

Just use this code.. simple for you to set the default datetime, In this case it is the current datetime..cheers

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