Switch DateTimePicker view when button is clicked

Question

I am using DateTimePicker 3 Bootstrap for my calendar in my project. I need to switch my datetimepicker view from 'month to date' or 'date to month' if I click some buttons. I tried using jQuery but it's not working at all. Please check if I made a mistake in the code.

My current markup and script code:

<script>
$(document).ready(function(){
    $("#Month").click(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'M-YYYY',
            maxDate: 'now'
        });
    });
    $("#Date").click(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: 'now'
        });
    });
});
</script>

<div class="form-group">
    <div class='input-group date' id='datetimepicker3'>
        <input type='text' class="form-control" name="date" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</div>

My desired result:

Answer 1

To change view mode you can simply use viewMode option.

You can init you datepicker with a default configuration (days or months) and then changing options using viewMode and format functions.

You can use the following code as example:

// Init datetimepicker with default config
// (if you want date config change format: 'DD-MM-YYYY' and viewMode: 'days')
var picker = $('#datetimepicker3').datetimepicker({
  format: 'M-YYYY',
  maxDate: 'now',
  viewMode: 'months'
});

$("#Month").click(function () {
  picker.data("DateTimePicker").format('M-YYYY');
  picker.data("DateTimePicker").viewMode('months');

});
$("#Date").click(function () {
  picker.data("DateTimePicker").format('DD-MM-YYYY');
  picker.data("DateTimePicker").viewMode('days');

});

<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"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.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.13.0/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="form-group">
  <div class="input-group date" id="datetimepicker3">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
  </div>
</div>
<div class="form-group">
  <button id="Month" class="btn btn-default">Month</button>
  <button id="Date" class="btn btn-default">Date</button>
</div>