Eonasdan DateTimePicker - получить отображаемую дату (год / месяц)

Question

Есть ли способ получить отображаемые в данный момент месяц и год?
В идеале для меня это будет доступно в событии обновления.
Я вижу, что атрибут "change" события обновления имеет значение "M" при смене месяцев, однако я не могу найти текущий отображаемый месяц и год. Это доступно где-нибудь?

Благодарю.

Answer 1

Вы можете получить текущее значение datetimepicker, используя date() функция:

Возвращает текущую дату модели компонента, moment объект или null если не установлено.

Тогда вы можете использовать функцию momentjs, такую ​​как format(), month(), year() получить читаемую информацию о выбранной дате.

Если вы хотите узнать отображаемый год / месяц, когда пользователь просматривает компонент, используя кнопки "Предыдущая" и "Следующая", вы можете добавить список в dp.update событие.

Уволен (в большинстве случаев), когда viewDate изменения. Например, кнопки Next и Previous, выбирающие год.

viewDate Свойство событий является моментным объектом, представляющим текущую дату просмотра. Опять же, вы можете использовать функции момента, чтобы показать информацию о дате просмотра.

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

$('#datetimepicker1').datetimepicker({
  useCurrent: false
}).on('dp.update', function(e){
  console.log("Displayed year/month " + e.viewDate.format("YYYY MMMM"));
})

function getDate(){
  var selDate = $('#datetimepicker1').data("DateTimePicker").date();
  if(selDate){
    console.log("Displayed year/month " + selDate.format("YYYY MMMM"));
  }
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
    <div class='col-sm-6'>
      <button class="btn btn-primary" onclick="getDate()">Get date</button>
    </div>
  </div>
</div>