javascriptdatetimepickerbootstrap-datetimepickereonasdan-datetimepicker

Tempus Dominus Datetime Picker How to set value?

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...

Solution

  • 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().