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.