Setting the calendar value using viewDate function in Tempus Dominus

Question

What I am trying to do is set the month and year from an event calendar to Tempus Dominus datepicker. So on the main page is a big calendar, the user may change the month from November to December, and the create a new event in December.

Once the user clicks the button to enter a new event, I want to set the datepicker to that month. Per the docs on the page I access the functions with:

$('#datetimepicker').datetimepicker(FUNCTION)

To set the viewDate I need to put the date in () viewDate('11/21/2018') putting it together (I have tried a few different ways it should look something like:

$('#datetimepicker').datetimepicker(viewDate('11/21/2018'))

I have put viewDate in single quotes, tried viewDate: and a few others, with no luck. I currently have it wired to a button and hard coded the date like above for testing.

What is it that I am not understanding or doing wrong.

Answer 1

I think that the right way of calling viewDate function is:

$('#datetimepicker').datetimepicker('viewDate', <value>)

where <value> is a string (compliant with format option), moment or Date value.

Anyway, I fear that the current version (5.1.2) of Tempus Dominus datetimepicker has a bug/issue and the viewDate is not notified to the component view.

If you need you can use date instead of viewDate to change component's value.

Here a live sample:

$('#datetimepicker1').datetimepicker();

$('#btnViewDate').click(function() {
  $('#datetimepicker1').datetimepicker('viewDate', moment('11/21/2018', 'MM/DD/YYYY') );
});

$('#btnDate').click(function() {
  $('#datetimepicker1').datetimepicker('date', moment('11/21/2018', 'MM/DD/YYYY') );
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/tempusdominus-bootstrap-4.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/tempusdominus-bootstrap-4.js"></script>

<div class="container">
  <div class="row form-inline">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-2">
      <button type="button" class="btn btn-primary" id="btnViewDate">
        Set viewDate
      </button>
    </div>
    <div class="col-sm-2">
      <button type="button" class="btn btn-primary" id="btnDate">
        Set date
      </button>
    </div>
    
  </div>
</div>

Answer 2

In the new version of tempus-dominus they are using class now ex :

options: object of the configurations

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),options);

So to change the value you should use setValue function

instance: instance of TempusDominus class

instance.setValue("2023-04-04")

they are more function to deal with tempusDominus datetimepicker like :

getviewDate : Returns a moment variable with the currently

setviewDate : opposit of getviewDate

updateOptions : Update the picker options. If reset is provide options will be merged with DefaultOptions instead. ex :

let  options = {
                        display: {
                            components: {
                                calendar: true,
                                date: true,
                                month: true,
                                year: true,
                                decades: true,
                                clock: true,
                                hours: true,
                                minutes: true,
                                seconds: true
                            }
                        },
                        localization: {
                            format: 'yyyy/MM/dd HH:mm:ss'
                        }
                    };




instance.updateOptions(options);

more function TempusDominus repository