Switch DateTimePicker Ansicht, wenn die Schaltfläche geklickt wird

Question

Ich verwende DateTimePicker 3 Bootstrap für meinen Kalender in meinem Projekt. Ich muss meine Datetimepicker-Ansicht von "Monat zu Datum" oder "Datum zu Monat" wechseln, wenn ich auf einige Schaltflächen klicke. Ich habe versucht mit jQuery, aber es funktioniert überhaupt nicht. Bitte überprüfen Sie, ob ich einen Fehler im Code gemacht habe.

Mein aktueller Markup und 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> 

Mein gewünschtes Ergebnis:

Answer 1

Um Anzeigemodus zu ändern, können Sie einfach viewMode Option verwenden.

Sie können den Datepicker mit einer Standardkonfiguration (Tage oder Monate) init initialisieren und dann die Optionen mit den Funktionen viewMode und format ändern.

Sie können den folgenden Code als Beispiel verwenden:

// 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>