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

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

0 голосов
/ 22 ноября 2018

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 23 ноября 2018

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

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

, где <value> - строка (соответствует format option), момент или значение Date.

В любом случае, я боюсь, что текущая версия (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>
...