Bootstrap datetimepicker changing formats dynamically

Question

I have a function that I'm using to update the format of a Bootstrap datetimepicker when some event happens. The first subsequent time that I click on the datetimepicker, it utilizes the new format to render the picker. For example, if I set the format to YYYY it only shows years. However, if I close the datepicker and open it again, then it renders the full calendar. Am I doing something wrong, or is this a bug with the datetimepicker?

function updateInterval(interval) {
    $('#interval').val(interval);
    if (interval === 'LAST24') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
    } else if (interval === 'HOURLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'DAILY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'WEEKLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
    } else if (interval === 'MONTHLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
    }
}

Based on the documentation it seems pretty straightforward, so not sure what I'd be doing wrong.

Answer 1

Your code is fine, it's a known bug of the lastest version of Eonasdan's bootstrap-datetimepicker. You can try to set currentViewMode = 0; in the component code as suggested in the github link or use an older version, like 4.17.37, as shown in the following working snippet:

var jq182 = $;
function updateInterval(interval) {
    $('#interval').val(interval);
    if (interval === 'LAST24') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY HH:mm:ss');
    } else if (interval === 'HOURLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'DAILY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/DD/YYYY');
    } else if (interval === 'WEEKLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('MM/YYYY');
    } else if (interval === 'MONTHLY') {
        jq182('#endDatePicker').datetimepicker().data('DateTimePicker').format('YYYY');
    }
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/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.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="endDatePicker">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<button type="button" class="btn btn-default" onclick="updateInterval('LAST24')">LAST24</button>
<button type="button" class="btn btn-default" onclick="updateInterval('HOURLY')">HOURLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('DAILY')">DAILY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('WEEKLY')">WEEKLY</button>
<button type="button" class="btn btn-default" onclick="updateInterval('MONTHLY')">MONTHLY</button>

<input type="text" id="interval" class="form-control" readonly>

Here and here people that had the same issue.