ボタンをクリックしたときのDateTimePickerビューの切り替え

Question

私のプロジェクトのカレンダーにDateTimePicker 3 Bootstrapを使用しています。いくつかのボタンをクリックすると、datetimepickerビューを '月間'または '月別'に切り替える必要があります。私はjQueryを使ってみましたが、全く動作しません。 コードを間違えていないか確認してください。

私の現在のマークアップとスクリプトコード：

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

私の希望する結果：

Answer 1

あなたは、単にviewModeオプションを使用することができますビューモードを変更します。

デフォルト設定（日または月）でdatepickerを初期化してから、viewModeおよびformat機能を使用してオプションを変更することができます。

あなたは一例として、次のコードを使用することができます。

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