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:

score 1 · Accepted Answer · answered Jul 27 '16 at 07:39

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>

Your answer is working perfectly! now, how would I get the buttons to change colors when a person clicks on the button? — Suhandy Chow, Jul 27 '16 at 08:06
You can change button color using jQuery (through `addClass` or `css` method, for example). Anyway this request in not strictly related to your original question, so I suggest to search an example online (e.g. see this [answer](http://stackoverflow.com/a/16240943/4131048) — VincenzoC, Jul 27 '16 at 08:23

Switch DateTimePicker view when button is clicked

1 Answers1