Установка значения календаря с помощью функции viewDate в Tempus Dominus

Question

То, что я пытаюсь сделать, это установить месяц и год из календаря событий в DatePicker Tempus Dominus. Так что на главной странице есть большой календарь, пользователь может изменить месяц с ноября на декабрь, а создать новое событие в декабре.

Когда пользователь нажимает кнопку, чтобы ввести новое событие, я хочу установить указатель даты на этот месяц. Согласно документам на странице, я получаю доступ к функциям с помощью:

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

Чтобы установить viewDate Мне нужно поставить дату в ()viewDate('11/21/2018')положить его вместе (я пробовал несколько разных способов, это должно выглядеть примерно так:

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

я положил viewDate в одинарных кавычках пробовал viewDate: и несколько других, без удачи. В настоящее время я подключил его к кнопке и жестко запрограммировал дату, как указано выше, для тестирования.

Что я не понимаю или делаю неправильно?

Answer 1

Я думаю, что правильный способ звонить viewDate функция:

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

где <value> является строкой (соответствует format опция), значение момента или даты.

Во всяком случае, я боюсь, что текущая версия (5.1.2) из Tempus Dominus datetimepicker есть ошибка / проблема и viewDate не уведомляется в представлении компонента.

Если вам нужно, вы можете использовать date вместо viewDate изменить значение компонента.

Вот живой пример:

$('#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/tempusdominus-bootstrap-4@5.1.2/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/tempusdominus-bootstrap-4@5.1.2/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

В новой версии tempus-dominus теперь используется класс ex :

options: объект конфигураций

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

Итак, чтобы изменить значение, вы должны использовать функцию setValue

instance: экземпляр класса TempusDominus

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

они больше подходят для работы с tempusDominus datetimepicker, например:

getviewDate : возвращает переменную момента с текущим

setviewDate : напротив getviewDate

updateOptions : обновить параметры средства выбора. Еслиresetобеспечиваетoptionsвместо этого будет объединен с DefaultOptions. бывший :

      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);

дополнительные функции Репозиторий TempusDominus